ID de cliente de Google Analytics en páginas AMP

Este artículo es una colaboración entre Simo y Daniel Wilkerson. Dan es uno de los desarrolladores de análisis más inteligentes que existen y ya ha contribuido de manera excelente Publicación de invitado #GTMTips. Es genial tenerlo aquí de regreso compartiendo su visión sobre cómo trabajar con Páginas móviles aceleradas (AMPERIO).

Entonces, ¡estamos de vuelta en AMP! Simo escribió un largo y extenso Guía de AMP para Google Tag Supervisor hace un tiempo, y Dan también ha contribuido al espacio con su guía para AMP y Google Analytics. Ambas guías abordaron un tema que podría ser una de las razones para mantenerse alejado de AMP por ahora: la coincidencia de ID de cliente en AMP, su sitio net routine y cualquier caché o CDN que proporcione la versión AMP.

AMP no sólo tiene su propia sintaxis única para el ID de cliente, sino que también lo almacena de diferentes maneras. Por ejemplo, en el Caché de AMP (y por lo tanto también a través de la búsqueda de Google), se almacena en localStorage. Si alguien visita su sitio directamente y accede a las páginas AMP, el ID de cliente se almacena en el AMP_ECID_GOOGLE galleta. Y luego, si alguien visita una página regular de su sitio, el ID de cliente se puede encontrar en la _ga galleta.

En este artículo, Dan y Simo abordan este problema mostrando cómo entregar el ID de cliente. consecuentemente desde _ga cookie escrita en el dominio actual de su sitio net. De esta manera, las páginas AMP utilizarán el mismo ID de cliente que utiliza Google Analytics routine y usted podrá identificar los recorridos de los clientes que pueden pasar tanto por su sitio routine como por su contenido AMP.

Los ejemplos se proporcionan en NodeJS y PHP (WordPress), pero la metodología es common y bastante sencilla de realizar con cualquier software program de servidor net.

incógnita

El boletín a fuego lento

Suscríbete al Boletín a fuego lento para recibir las últimas noticias y contenido de Simo Ahava en su bandeja de entrada de correo electrónico.

Descripción common

Para resumir, Google Analytics almacena un identificador único para cada usuario que visita su sitio dentro de un sitio propio galleta. Este valor, en el lenguaje de GA, se llama ID de clientey el nombre de la cookie es _ga. Así es como se ve toda la cadena de cookies, con el ID de cliente actual en negrita.

AG1.2.1789536866.1471440764

El GA1 El valor indica que esta es la versión 1 del _ga galleta. El 2 denota el número de componentes separados por puntos en la URL en la que se almacena la cookie. Por ejemplo, si a GA se le ordenara almacenar la cookie en tienda.ejemplo.comel número sería 3 en su lugar.

Debido a que las páginas AMP se pueden almacenar en caché y publicarse en muchos dominios diferentes, los usuarios que podrían haber tenido un único ID de cliente podrían terminar divididos en varios usuarios.

Esta parece ser, al menos en parte, la razón por la que Google Analytics recomienda oficialmente usando una propiedad GA separada para datos AMP.

Sin embargo, hay una manera de utilizar solo el _ga cookie para todas las fuentes que sirven su contenido net. Para hacer esto, necesitaremos personalizar nuestro amp-analytics componente.

Configuración de AMP personalizada

amp-analytics es el componente que utiliza AMP para rastrear las interacciones de los usuarios. Si desea obtener más información sobre todas las funciones que admite, consulte la guía de AMP para GTM en este weblog; debe tener toda la información que necesita.

Para nuestros propósitos, centrémonos en el config atributo. Es un atributo opcional que podemos usar para indicarle a AMP: “Oye, tenemos algunas configuraciones adicionales que necesitamos que obtengas de esta ubicación”. Este atributo debe establecerse en una URL desde donde se deben recuperar configuraciones de análisis adicionales. En otras palabras, debe especificar un punto last de solicitud HTTP que devuelva un valor válido, JSON suitable con AMP archivo de configuración.

<amp-analytics config="//instance.com/analytics.config.json">amp-analytics>

Una vez que el navegador haya cargado la página AMP y la página esté seen en la ventana del navegador, AMP buscará este archivo de configuración externo y lo utilizará para complementar cualquier configuración que ya esté establecida en la página. A diferencia de otros recursos en su contenido, su amp-analytics config siempre apuntará a su servidor y el resultado no se almacena en caché automáticamente. Cuando llegue la solicitud a su servidor, incluirá todas las cookies configuradas en el navegador del usuario en su dominio.

¡NOTA! Si su contenido se entrega a través de Google AMP Cache, y cuando, cualquier configuración externa debe descargarse de una fuente HTTPS. Por lo tanto, si su servidor net está detrás de HTTP, deberá ofrecer solo su configuración personalizada cuando los visitantes estén en su dominio O usar solo la plantilla de configuración predeterminada. O ya sabes, cambia a HTTPS lo antes posible.

Agarrando el _ga galleta

Cuando su servidor net recibe la solicitud de configuración AMP personalizada, puede verificar las cookies en la solicitud HTTP para ver si hay una _ga La cookie ya está configurada para el usuario en el dominio del sitio net. Este sería el caso si el usuario ha visitado su contenido antes (y no ha eliminado las cookies). Si se encuentra la cookie, puede utilizar un encabezado HTTP específico (ver más abajo) en la respuesta para pasar esta cookie al dominio desde donde se originó la solicitud, por ejemplo, la caché AMP de Google.

Si la galleta es no encontrado, puedes generar un nuevo _ga galleta, siguiendo el mismo patrón análisis.js utiliza: un entero aleatorio de 32 bits sin signo junto con una marca de tiempo redondeada al segundo más cercano, como este:

1789536866.1471440764

Luego puedes aprovechar el Set-Cookie encabezado en la respuesta HTTP e indique al navegador que almacene el nuevo ID de cliente en un _ga cookie, asegurándose de establecer el dominio, la ruta y la fecha de vencimiento para que coincidan con el dominio desde el que se originó la solicitud (por ejemplo, cdn.ampproject.org), tal como lo hace Analytics.js. Tendrás que agregar lo mismo. GA1.X. prefijo que GA también usa. Además, deberás hacer esto en cada uno solicitud, de modo que la vida útil del _ga La cookie continúa extendiéndose en cada carga de página. El Set-Cookie debería terminar pareciéndose a esto:

Set-Cookie: _ga=GA1.1.18347199128.1478727498; Dominio=ejemplo.com; Ruta=/; Vence = sábado 10 de noviembre de 2018 21:06:48 GMT;

Finalmente, puede devolver el ID del cliente en la respuesta JSON como una variable AMP personalizada para usar con nuestras solicitudes AMP:

{
  "vars": {
    "clientId": "18347199128.1478727498"
  }
}

Lista de verificación para configurar el controlador de solicitudes

Por supuesto, no es tan easy. Además de transponer nuestro ID de cliente y configurarlo como cookie, debemos asegurarnos de haber puesto los puntos en algunas íes. Aquí hay una lista de verificación útil de los pasos de configuración que se deben seguir para garantizar que todo funcione en la naturaleza.

• En el sitio HTML:

  • Añade el amp-analytics etiqueta de secuencia de comandos y amp-analytics componente a sus plantillas AMP.

  • Configure el componente JSON para los activadores y solicitudes deseados, utilizando ${clientId} para el &cid; parámetro. Alternativamente, puede utilizar la plantilla de proveedor de Google Analytics prediseñada agregando sort="googleanalytics" al componente.

  • Punto config atribuir a un punto last o API en su propio servidor.

  • Colocar data-credentials="embody".

• En su servidor net:

  • En el controlador de solicitudes de su servidor net, extraiga el ID de cliente del _ga cookie o generar una nueva.

  • Añade el clientId parámetro al vars objeto en la configuración JSON. Configúrelo en el ID de cliente del _ga galleta.

  • Añade el Set-Cookie encabezado con el _ga cookie, que caducará en dos años.

  • Establecer el Entry-Management-Enable-Origin encabezado a https://cdn.ampproject.org. Nota: comodines

  • no son válidos en este contexto. Entry-Management-Expose-Headers Establecer el AMP-Entry-Management-Enable-Supply-Originencabezado a

  • . Entry-Management-Enable-Credentials Establecer el trueencabezado a

  • . AMP-Entry-Management-Enable-Supply-Origin Establecer el encabezado https://mysite.comal dominio de origen del documento (p. ej.

  • ).

Devuelve la configuración JSON en el cuerpo de la respuesta. Para un ejemplo completo,echa un vistazo a este repositorio en GitHub

. Si está utilizando la configuración de proveedor de Google Analytics, esto es todo lo que necesita hacer. Si quieres combinar este concepto con Google Tag Supervisor, ¡sigue leyendo!

Proxy de Google Tag Supervisor usando NodeJS Mientras Simo cubría suGuía GTM/AMP

Google Tag Supervisor nos permite crear etiquetas y activadores en una interfaz de usuario net y luego compilarlos en una configuración JSON en el formato que espera AMP. Sin embargo, si utilizamos la implementación estándar de GTM, la solicitud del contenedor se realiza directamente al servidor de GTM, lo que significa que nuestra API personalizada no podría proporcionar el ID de cliente adecuado. Dicho esto, aún puedes combinar ambas técnicas. Sólo tienes que arremangarte un poco. Aquí hay un ejemplo truncado, usando Nodo yExpresar . Para el código completo,visita este repositorio de GitHub

app.get('/gtm-analytics.config.json', (req, res) => {

  const area = req.headers.host.break up(':')(0)
  const gaCookie = req.cookies._ga || generateGaCookie(area)
  const clientId = parseClientIdFromGaCookie(gaCookie)
  const cookieString = generateCookieString({
    title: '_ga',
    worth: gaCookie,
    area: area.exchange('www.', ''),
    path: '/',
    expires: new Date(1000 * 60 * 60 * 24 * 365 * 2 + (+new Date)).toGMTString()
  })

  res.setHeader('Set-Cookie', cookieString)
  res.setHeader('Entry-Management-Enable-Origin', 'https://cdn.ampproject.org')
  res.setHeader('Entry-Management-Expose-Headers', 'AMP-Entry-Management-Enable-Supply-Origin')
  res.setHeader('Entry-Management-Enable-Credentials', 'true')
  // AMP-specific header, verify your protocol
  res.setHeader('AMP-Entry-Management-Enable-Supply-Origin', 'https://' + area)

  request.get({
    url: 'https://www.googletagmanager.com/amp.json',
    qs: req.question,
    json: true
  }, (err, response, information) => {

    if (err) information = {"vars": {}}  // Add extra error dealing with right here

    information.vars.clientId = clientId

    information.requests = Object.keys(information.requests)
      .scale back((map, key) => {
  
        map(key) = information.requests(key).exchange(/(&cid=)(^&)+/, '$1${clientId}')
        return map

      }, {})

    res.json(information)

  })

})

.

• Aquí hay otra lista de verificación, esta vez para combinar su solución alternativa personalizada de ID de cliente con el contenedor AMP de Google Tag Supervisor. He puesto en negrita los nuevos pasos.

  • En su página HTML: amp-analytics Añade el amp-analytics etiqueta de secuencia de comandos y

  • componente a sus plantillas AMP. config Punto

  • atribuir a un punto last o API en su propio servidor. data-credentials Colocar embodyatribuir a

• .

  • En su servidor net: _ga En el controlador de solicitudes de su servidor net, extraiga el ID de cliente del

  • cookie o generar una nueva amp-analytics Solicite el contenedor JSON de GTM, pasando todos los parámetros de consulta del unique

  • pedido.

  • Reemplace todas las instancias de ‘CLIENT_ID(AMP_ECID_GOOGLE)’ en la solicitud con ‘${clientId}’. clientId Añade el vars parámetro al _ga objeto en la configuración JSON. Configúrelo en el ID de cliente del

  • galleta. Set-Cookie Añade el _ga encabezado con el

  • cookie, que caducará en dos años. Entry-Management-Enable-Origin Establecer el https://cdn.ampproject.orgencabezado a

  • . Nota: comodines Entry-Management-Expose-Headers no son válidos en este contexto. AMP-Entry-Management-Enable-Supply-OriginEstablecer el

  • encabezado a Entry-Management-Enable-Credentials . trueEstablecer el

  • encabezado a AMP-Entry-Management-Enable-Supply-Origin . https://mysite.comEstablecer el encabezado

  • al dominio de origen del documento (p. ej.

).

<amp-analytics config="//www.yourdomain.com/gtm-analytics.config.json?id=GTM-XXXXX&gtm.url=SOURCE_URL" data-credentials="embody">amp-analytics>

Devuelve la configuración JSON en el cuerpo de la respuesta. _ga En el código de su sitio necesitará:

Felicitaciones, ha creado un proxy net que recupera el contenedor de Google Tag Supervisor de los servidores de Google y modifica el JSON para aprovechar el valor almacenado en el

galleta.

Proxy de Google Tag Supervisor con WordPress rest_api_init Este weblog se ejecuta en WordPress, por lo que Simo quería ver qué tan trivial sería crear el punto last. Resulta que es muy easy.

// REST API for GTM container
add_action( 'rest_api_init', perform() {
    register_rest_route( 
        'amp-gtm',
        '/amp.json',
        array(
            'strategies' => 'GET',
            'callback' => 'retrieve_gtm_json',
        )
    );
});

WordPress proporciona la gancho, que le permite crear un punto last de solicitud HTTP en su servidor net: Ese fragmento de código en tu /wp-json/amp-gtm/amp.jsonfunciones.php retrieve_gtm_json crearía un punto last de solicitud GET en la ruta de su dominio net

// Generate random Shopper ID
perform generate_ga_client_id() {
    return rand(100000000,999999999) . '.' . time();
}

// Set cookie to run out in 2 years
perform getCookieExpirationDate() {
    return date('D, j F Y H:i:s', time() + 60*60*24*365*2);
}

// Callback for the GET request
perform retrieve_gtm_json( $information ) {
    /* Get the hostname of the request origin, and parse it for the
     * pure area title. */
    $area = explode(':', $data->get_header('Host'))(0);
    $domainName = str_replace('www.', '', $area);

    // Get the variety of components within the area title
    $domainLength = rely(explode('.', $domainName));

    /* Test if the browser already has the _ga cookie.
     * If not, generate a brand new cookie. */
    $cid = $_COOKIE('_ga');
    if (!isset($cid)) {
        $cid = "GA1.{$domainLength}." . generate_ga_client_id();
    }

    /* Retailer the precise Shopper ID (final two numbers) of the
     * _ga cookie worth within the $cidNumber variable */
    $cidNumber = preg_replace('/^GA..(^.)+./','',$cid);
  
    // Get all HTTP request parameters
    $question = $_SERVER('QUERY_STRING');
    
    /* Fetch the precise GTM container, by passing the legitimate question parameters from
     * the unique request. */
    $container = file_get_contents("https://www.googletagmanager.com/amp.json?{$question}");
    
    // Substitute the &cid; parameter worth with ${clientId}
    $container = preg_replace('/(&cid=)(^&)+/','${1}${clientId}', $container);
  
    // Add the clientId to the "vars" object within the container JSON.
    $container = json_decode($container);
    $container->vars->clientId = $cidNumber;
    
    // Construct a brand new HTTP response from the modified configuration file.
    $response = new WP_REST_RESPONSE( $container );
    
    // Add the required headers (Set-Cookie, most significantly) to the Request
    $response->header( 'Set-Cookie', "_ga={$cid}; Path=/; Expires=" . getcookieExpirationDate() . " GMT; Area={$domainName};");
    $response->header( 'Entry-Management-Enable-Origin', 'https://cdn.ampproject.org');
    
    // Keep in mind to verify the protocol and alter to http if that is the place your area is
    $response->header( 'AMP-Entry-Management-Enable-Supply-Origin', "https://{$area}");
    $response->header( 'Entry-Management-Expose-Headers', 'AMP-Entry-Management-Enable-Supply-Origin');
    
    // Return the HTTP response.
    return $response;
}

. Si se registra una solicitud GET a este punto last, la función de devolución de llamada denominada ${clientId}Luego se invoca: _ga Este es el script API que maneja las solicitudes para el contenedor de Google Tag Supervisor. El proxy recupera el contenedor GTM y reemplaza el ID de cliente predeterminado con la variable AMP _ga . Esto, a su vez, se agrega al JSON de configuración con el valor recuperado del

galleta. si el

<amp-analytics config="//www.yourdomain.com/wp-json/amp-gtm/amp.json?id=GTM-XXXXX&gtm.url=SOURCE_URL" data-credentials="embody">amp-analytics>

La cookie no existe, se genera una nueva.

En el código de su sitio, necesitará:

Luego, esta solicitud se pasa a su punto last y se llevará a cabo el proceso descrito anteriormente. Configuración de Google Analytics No es necesario hacer mucho en Google Analytics, pero querrás agregar ampproject.org en el

Lista de exclusión de referencias

de la configuración de su propiedad de Google Analytics. De lo contrario, si el usuario sigue algún enlace desde la página AMP almacenada en caché al resto de su sitio, el clic iniciará una nueva sesión con una referencia de ampproject.org.

¡Gracias a Adrian Vender por este consejo!

Resumen _ga Este es un tema bastante técnico, pero a nosotros, los autores, nos pareció necesario señalar esta posible falla en cómo realizar análisis en Accelerated Cellular Pages podría ser perjudicial para su plan de seguimiento common. AMP_ECID_GOOGLE El hecho de que AMP no aproveche automáticamente la

cookie si la solicitud es a Google Analytics, por ejemplo, es un poco rara. De manera comparable, Google Tag Supervisor de forma predeterminada _ga También es extraño, considerando lo fáciles que serían las cosas si pudiera proporcionar un nombre de cookie o una variable AMP para el ID del cliente en la solicitud.

Debido a que la caché AMP de Google es un dominio diferente al suyo, realmente no hay forma de evitar la unión de ID de cliente que no implique el tipo de esquema de cookies de terceros como se describe en esta guía. Se debe permitir que la solicitud procese las cookies escritas en su dominio, de modo que la misma

El valor de la cookie se puede utilizar en las páginas del dominio externo.