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 etamp-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 ajoutanttype="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 auvars
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 leAMP-Access-Control-Allow-Source-Origin
en-tête à -
.
Access-Control-Allow-Credentials
Met letrue
en-tête à -
.
AMP-Access-Control-Allow-Source-Origin
Définir l’en-têtehttps://mysite.com
au 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 leamp-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
Ensembleinclude
attribuer à
-
-
.
-
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 levars
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 lehttps://cdn.ampproject.org
en-tête à -
. Remarque : caractères génériques
Access-Control-Expose-Headers
sont invalides dans ce contexte.AMP-Access-Control-Allow-Source-Origin
Met le -
en-tête à
Access-Control-Allow-Credentials
.true
Met le -
en-tête à
AMP-Access-Control-Allow-Source-Origin
.https://mysite.com
Dé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>m.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.json
fonctions.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>m.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.