ID client Google Analytics dans les pages AMP

Cet article est une collaboration entre Simo et Dan Wilkerson. Dan est l’un des développeurs d’analyses les plus intelligents et il a déjà contribué à un excellent article invité #GTMTips. C’est formidable de l’avoir de retour ici pour partager son point de vue sur le travail avec les pages mobiles accélérées (AMP).

Alors, on est de retour sur AMP ! Simo a écrit un long et tentaculaire guide AMP pour Google Tag Manager il y a quelque temps, et Dan a également contribué à l’espace avec son guide pour AMP et Google Analytics. Ces deux guides ont abordé un sujet qui pourrait être l’une des raisons de rester à l’écart d’AMP pour le moment : la correspondance des ID client sur AMP, votre site Web habituel et tous les caches ou CDN qui desservent la version AMP.

Non seulement AMP a sa propre syntaxe unique pour l’ID client, mais il le stocke également de différentes manières. Par exemple, dans le cache AMP (et donc via la recherche Google également), il est stocké dans localStorage. Si quelqu’un visite votre site directement et accède aux pages AMP, l’ID client est stocké dans le AMP_ECID_GOOGLE biscuit. Et puis, si quelqu’un visite une page régulière de votre site, l’ID client peut être trouvé dans le _ga biscuit.

Dans cet article, Dan et Simo abordent ce problème en montrant comment servir l’ID client régulièrement du _ga cookie écrit sur le domaine réel de votre site Web. De cette façon, les pages AMP utiliseront le même identifiant client que celui utilisé par Google Analytics, et vous pourrez identifier les parcours des clients qui peuvent passer par votre site habituel ainsi que par votre contenu AMP.

Les exemples sont fournis en NodeJS et PHP (WordPress), mais la méthodologie est universelle et assez simple à faire avec n’importe quel logiciel de serveur web.

Aperçu

Pour récapituler, Google Analytics stocke un identifiant unique pour chaque utilisateur qui visite votre site dans un cookie propriétaire. Cette valeur, dans le jargon GA, s’appelle le identité du clientet le nom du cookie est _ga. Voici à quoi ressemble l’ensemble de la chaîne de cookies, avec l’ID client réel en gras.

GA1.2.1789536866.1471440764

Les GA1 indique qu’il s’agit de la version 1 du _ga biscuit. Les 2 indique le nombre de composants séparés par des points dans l’URL où le cookie est stocké. Par exemple, si GA a été chargé de stocker le cookie à boutique.exemple.comle nombre serait 3, à la place.

Étant donné que les pages AMP peuvent être mises en cache et servies sur de nombreux domaines différents, les utilisateurs qui auraient pu avoir un seul ID client pourraient finir par être divisés en plusieurs utilisateurs à la place.

Cela semble être au moins en partie la raison pour laquelle Google Analytics recommande officiellement d’utiliser une propriété GA distincte pour les données AMP.

Cependant, il existe un moyen d’utiliser seul les _ga cookie pour toutes les sources qui diffusent votre contenu Web. Pour ce faire, nous devrons personnaliser notre amp-analytics composant.

Configuration AMP personnalisée

amp-analytics est le composant utilisé par AMP pour suivre les interactions des utilisateurs. Si vous souhaitez en savoir plus sur toutes les fonctionnalités prises en charge, consultez le guide AMP pour GTM dans ce blog. il devrait avoir toutes les informations dont vous avez besoin.

Pour nos besoins, concentrons-nous sur config attribut. C’est un attribut facultatif que nous pouvons utiliser pour indiquer à AMP : “Hé, nous avons des configurations supplémentaires que nous devons récupérer à cet emplacement”. Cet attribut doit être défini sur une URL à partir de laquelle des configurations d’analyse supplémentaires doivent être récupérées. En d’autres termes, vous devez spécifier un point de terminaison de requête HTTP qui renvoie un fichier de configuration JSON valide et conforme à AMP.

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

Une fois que le navigateur a chargé la page AMP et que la page est visible dans la fenêtre du navigateur, AMP récupère ce fichier de configuration externe et l’utilise pour compléter toutes les configurations déjà établies sur la page. Contrairement à d’autres ressources dans votre contenu, votre amp-analytics config pointera toujours vers votre serveur et le résultat n’est pas automatiquement mis en cache. Lorsque la demande adressée à votre serveur arrivera, elle inclura tous les cookies définis sur le navigateur de l’utilisateur sur votre domaine.

REMARQUE! Si, et quand, votre contenu est diffusé via Google AMP Cache, toute configuration externe doit être téléchargé depuis une source HTTPS. Ainsi, si votre serveur Web est derrière HTTP, vous devrez soit servir votre configuration personnalisée uniquement lorsque les visiteurs se trouvent sur votre domaine, soit utiliser uniquement le modèle de configuration par défaut à la place. Ou, vous savez, passez au HTTPS dès que possible.

Saisir le _ga biscuit

Lorsque la demande de configuration AMP personnalisée est reçue par votre serveur Web, vous pouvez vérifier les cookies dans la demande HTTP pour voir si un _ga cookie est déjà défini pour l’utilisateur sur le domaine du site Web. Ce serait le cas si l’utilisateur a déjà visité votre contenu (et n’a pas vidé les cookies). Si le cookie est trouvé, vous pouvez utiliser un en-tête HTTP spécifique (voir ci-dessous) dans la réponse pour transmettre ce cookie au domaine d’où provient la requête, par exemple le cache AMP de Google.

Si le cookie est ne pas trouvé, vous pouvez générer un nouveau _ga cookie, suivant le même schéma analytics.js utilise – un entier aléatoire non signé de 32 bits couplé à un horodatage arrondi à la seconde la plus proche, comme ceci :

1789536866.1471440764

Vous pouvez alors tirer parti du Set-Cookie en-tête dans la réponse HTTP et demandez au navigateur de stocker le nouvel ID client dans un _ga cookie, en veillant à définir le domaine, le chemin et la date d’expiration pour qu’ils correspondent au domaine d’où provient la demande (par exemple cdn.ampproject.org), tout comme analytics.js. Vous devrez ajouter le même GA1.X. préfixe que GA utilise également. De plus, vous devrez le faire sur Chacun demande, de sorte que la durée de vie de la _ga cookie continue d’être étendu à chaque chargement de page. Les Set-Cookie devrait finir par ressembler à ceci :

Set-Cookie: _ga=GA1.1.18347199128.1478727498 ; Domaine=exemple.com ; Chemin=/; Expire = sam. 10 novembre 2018 21:06:48 GMT ;

Enfin, vous pouvez renvoyer l’ID client dans la réponse JSON en tant que variable AMP personnalisée à utiliser avec nos requêtes AMP :

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

Liste de contrôle pour la configuration du gestionnaire de requêtes

Bien sûr, ce n’est pas si simple. En plus de transposer notre identifiant client et de le définir comme cookie, nous devons nous assurer que nous avons mis quelques points sur les i. Voici une liste de contrôle pratique des étapes de configuration à suivre pour s’assurer que tout fonctionne dans la nature.

• Dans le HTML du site :

  • Ajouter le amp-analytics balise de script et amp-analytics composant à vos modèles AMP.

  • Configurez le composant JSON pour les déclencheurs et les requêtes souhaités, à l’aide de ${clientId} pour le &cid; paramètre. Vous pouvez également utiliser le modèle de fournisseur Google Analytics prédéfini en ajoutant type="googleanalytics" au composant.

  • Point config attribut à un point de terminaison ou à une API sur votre propre serveur.

  • Ensemble data-credentials="include".

• Dans votre serveur Web :

  • Dans le gestionnaire de requêtes de votre serveur Web, extrayez l’ID client du _ga cookie ou en générer un nouveau.

  • Ajouter le clientId paramètre au vars objet dans la configuration JSON. Définissez-le sur l’ID client à partir du _ga biscuit.

  • Ajouter le Set-Cookie en-tête avec le _ga cookie, configuré pour expirer dans deux ans.

  • Met le Access-Control-Allow-Origin en-tête à https://cdn.ampproject.org. Remarque : caractères génériques

  • sont invalides dans ce contexte. Access-Control-Expose-Headers Met le AMP-Access-Control-Allow-Source-Originen-tête à

  • . Access-Control-Allow-Credentials Met le trueen-tête à

  • . AMP-Access-Control-Allow-Source-Origin Définir l’en-tête https://mysite.comau domaine source du document (par exemple

  • ).

Renvoyez la configuration JSON dans le corps de la réponse.

Pour un exemple complet, consultez ce référentiel sur GitHub. Si vous utilisez la configuration du fournisseur Google Analytics, c’est tout ce que vous devez faire. Si vous souhaitez combiner ce concept avec Google Tag Manager, lisez la suite !

Proxy Google Tag Manager utilisant NodeJS

Comme Simo l’a expliqué dans son guide GTM/AMP, Google Tag Manager nous permet de créer des balises et des déclencheurs dans une interface utilisateur Web, puis de les compiler dans une configuration JSON au format attendu par AMP. Si nous utilisions l’implémentation standard de GTM, cependant, la demande de conteneur est effectuée directement sur le serveur de GTM, ce qui signifie que notre API personnalisée ne serait pas en mesure de servir le bon ID client. Cela dit, vous pouvez toujours combiner les deux techniques. Tu n’as plus qu’à retrousser un peu tes manches.

app.get('/gtm-analytics.config.json', (req, res) => {    const domain = req.headers.host.split(':')[0]   const gaCookie = req.cookies._ga || generateGaCookie(domain)   const clientId = parseClientIdFromGaCookie(gaCookie)   const cookieString = generateCookieString({     name: '_ga',     value: gaCookie,     domain: domain.replace('www.', ''),     path: '/',     expires: new Date(1000 * 60 * 60 * 24 * 365 * 2 + (+new Date)).toGMTString()   })    res.setHeader('Set-Cookie', cookieString)   res.setHeader('Access-Control-Allow-Origin', 'https://cdn.ampproject.org')   res.setHeader('Access-Control-Expose-Headers', 'AMP-Access-Control-Allow-Source-Origin')   res.setHeader('Access-Control-Allow-Credentials', 'true')   // AMP-specific header, check your protocol   res.setHeader('AMP-Access-Control-Allow-Source-Origin', 'https://' + domain)    request.get({     url: 'https://www.googletagmanager.com/amp.json',     qs: req.query,     json: true   }, (err, response, data) => {      if (err) data = {"vars": {}}  // Add additional error handling here      data.vars.clientId = clientId      data.requests = Object.keys(data.requests)       .reduce((map, key) => {            map[key] = data.requests[key].replace(/(&cid=)[^&]+/, '$1${clientId}')         return map        }, {})      res.json(data)    })  }) 

Voici un exemple tronqué, utilisant Node et Express. Pour le code complet, visitez ce dépôt GitHub.

• Voici une autre liste de contrôle, cette fois pour combiner votre solution de contournement personnalisée pour l’ID client avec le conteneur AMP de Google Tag Manager. J’ai mis en gras les nouvelles étapes.

  • Dans votre page HTML : amp-analytics Ajouter le amp-analytics balise de script et

  • composant à vos modèles AMP. config Point

  • attribut à un point de terminaison ou à une API sur votre propre serveur. data-credentials Ensemble includeattribuer à

• .

  • Dans votre serveur Web : _ga Dans le gestionnaire de requêtes de votre serveur Web, extrayez l’ID client du

  • cookie ou en générer un nouveau amp-analytics Demander le conteneur JSON à GTM, en transmettant tous les paramètres de requête de l’original

  • demande.

  • Remplacez toutes les instances de ‘CLIENT_ID(AMP_ECID_GOOGLE)’ dans la requête par ‘${clientId}’. clientId Ajouter le vars paramètre au _ga objet dans la configuration JSON. Définissez-le sur l’ID client à partir du

  • biscuit. Set-Cookie Ajouter le _ga en-tête avec le

  • cookie, configuré pour expirer dans deux ans. Access-Control-Allow-Origin Met le https://cdn.ampproject.orgen-tête à

  • . Remarque : caractères génériques Access-Control-Expose-Headers sont invalides dans ce contexte. AMP-Access-Control-Allow-Source-OriginMet le

  • en-tête à Access-Control-Allow-Credentials . trueMet le

  • en-tête à AMP-Access-Control-Allow-Source-Origin . https://mysite.comDéfinir l’en-tête

  • au domaine source du document (par exemple

).

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

Renvoyez la configuration JSON dans le corps de la réponse. _ga Dans votre code de site, vous aurez besoin de :

Félicitations, vous avez créé un proxy Web qui récupère le conteneur Google Tag Manager à partir des serveurs de Google et modifie le JSON pour tirer parti de la valeur stockée dans le

biscuit.

Proxy Google Tag Manager avec WordPress rest_api_init Ce blog fonctionne sur WordPress, donc Simo voulait voir à quel point il serait trivial de créer le point de terminaison. Il s’avère que c’est très simple en effet.

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

WordPress fournit le hook, qui vous permet de créer un point de terminaison de requête HTTP sur votre serveur Web : Ce morceau de code dans votre /wp-json/amp-gtm/amp.jsonfonctions.php retrieve_gtm_json créerait un point de terminaison de requête GET dans votre chemin de domaine Web

// Generate random Client ID function generate_ga_client_id() {     return rand(100000000,999999999) . '.' . time(); }  // Set cookie to expire in 2 years function getCookieExpirationDate() {     return date('D, j F Y H:i:s', time() + 60*60*24*365*2); }  // Callback for the GET request function retrieve_gtm_json( $data ) {     /* Get the hostname of the request origin, and parse it for the      * pure domain name. */     $domain = explode(':', $data->get_header('Host'))[0];     $domainName = str_replace('www.', '', $domain);      // Get the number of parts in the domain name     $domainLength = count(explode('.', $domainName));      /* Check if the browser already has the _ga cookie.      * If not, generate a new cookie. */     $cid = $_COOKIE['_ga'];     if (!isset($cid)) {         $cid = "GA1.{$domainLength}." . generate_ga_client_id();     }      /* Store the actual Client ID (last two numbers) of the      * _ga cookie value in the $cidNumber variable */     $cidNumber = preg_replace('/^GA.\.[^.]+\./','',$cid);        // Get all HTTP request parameters     $query = $_SERVER['QUERY_STRING'];          /* Fetch the actual GTM container, by passing the valid query parameters from      * the original request. */     $container = file_get_contents("https://www.googletagmanager.com/amp.json?{$query}");          // Replace the &cid; parameter value with ${clientId}     $container = preg_replace('/(&cid=)[^&]+/','${1}${clientId}', $container);        // Add the clientId to the "vars" object in the container JSON.     $container = json_decode($container);     $container->vars->clientId = $cidNumber;          // Build a new HTTP response from the modified configuration file.     $response = new WP_REST_RESPONSE( $container );          // Add the required headers (Set-Cookie, most importantly) to the Request     $response->header( 'Set-Cookie', "_ga={$cid}; Path=/; Expires=" . getcookieExpirationDate() . " GMT; Domain={$domainName};");     $response->header( 'Access-Control-Allow-Origin', 'https://cdn.ampproject.org');          // Remember to check the protocol and change to http if that's where your domain is     $response->header( 'AMP-Access-Control-Allow-Source-Origin', "https://{$domain}");     $response->header( 'Access-Control-Expose-Headers', 'AMP-Access-Control-Allow-Source-Origin');          // Return the HTTP response.     return $response; }

. Si une requête GET à ce point de terminaison est enregistrée, la fonction de rappel nommée ${clientId}est alors invoqué : _ga Il s’agit du script d’API qui gère les requêtes pour le conteneur Google Tag Manager. Le proxy récupère le conteneur GTM et remplace l’ID client par défaut par la variable AMP _ga . Ceci, à son tour, est ajouté au JSON de configuration avec la valeur extraite du

biscuit. Si la

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

cookie n’existe pas, un nouveau est généré.

Dans votre code de site, vous aurez besoin de :

Cette demande est ensuite transmise à votre point de terminaison et le processus décrit ci-dessus aura lieu. Configuration de Google Analytics Il n’y a pas grand-chose à faire dans Google Analytics, mais vous voudrez ajouter ampproject.org dans le

Liste d’exclusion de références

des paramètres de votre propriété Google Analytics. Sinon, si l’utilisateur suit un lien de la page AMP mise en cache vers le reste de votre site, le clic démarrera une nouvelle session avec une référence de ampproject.org.

Merci à Adrian Vender pour cette astuce !

Résumé _ga Il s’agit d’un sujet assez technique, mais nous, les auteurs, avons jugé nécessaire de souligner cette faille potentielle dans la façon dont l’analyse des pages mobiles accélérées pourrait nuire à votre plan de suivi global. AMP_ECID_GOOGLE Le fait qu’AMP n’exploite pas automatiquement le

cookie si la demande est adressée à Google Analytics, par exemple, est un peu étrange. De même, Google Tag Manager utilise par défaut _ga est bizarre aussi, compte tenu de la simplicité des choses si vous pouviez fournir un nom de cookie ou une variable AMP pour l’ID client dans la demande.

Étant donné que le cache AMP de Google est un domaine différent du vôtre, il n’y a vraiment aucun moyen de contourner l’assemblage de l’ID client qui n’impliquerait pas le type de schéma de cookies tiers décrit dans ce guide. La demande doit être autorisée à traiter les cookies écrits sur votre domaine, de sorte que le même

La valeur du cookie peut être utilisée sur les pages du domaine externe.