Plus vous comprenez le comportement de vos utilisateurs, plus vous pourrez commercialiser votre produit ou service – c'est pourquoi Google Tag Manager (GTM) est le meilleur ami du revendeur. Grâce aux modèles de balises intégrés, tels que la profondeur de défilement et le suivi des clics, GTM est un outil puissant pour mesurer l'engagement et le succès de votre contenu.
Si vous vous fiez uniquement aux modèles de balises dans GTM ou à Google Analytics une limitation limitante et ponctuelle, alors vous risquez de manquer des informations allant au-delà des mesures de participation normales. Cela signifie peut-être que vos données contiennent une histoire incomplète.
Ce billet vous apprendra comment obtenir encore plus d'informations en configurant des cookies dans GTM. Vous apprendrez à baliser et à suivre plusieurs affichages de pages au cours d'une même session, à suivre un nombre spécifique de pages, en fonction d'éléments de contenu spécifiques sur la page, et à comprendre comment les utilisateurs interagissent avec votre contenu afin que vous puissiez créer des données basées sur des données. décisions pour mieux conduire les conversions.
Exemple de cas d'utilisation
J'ai récemment travaillé avec un client qui souhaitait mieux comprendre le comportement des utilisateurs qui ont atterri sur le contenu de leur blog. La principale barrière à laquelle ils faisaient face était leur structure d'URL. Leur contenu ne vivait pas sur des structures d’URL logiques – ils ont placé leur mot clé cible juste après la racine. Ainsi, au lieu de example.com/blog/some-content leur structure d'URL ressemblait à exemple.com/some-content .
Vous pouvez utiliser des segments avancés dans Google Analytics. (GA) pour suivre un nombre quelconque de métriques, mais si vous n'avez pas d'URL définie logiquement, le suivi et la mesure de ces métriques deviennent une pratique manuelle et fastidieuse, en particulier lorsqu'il y a un grand nombre de pages à suivre. [19659002] Heureusement, l'utilisation d'un code de cookie personnalisé, que je fournis ci-dessous, vous aide à gagner du temps, nécessite peu d'effort de mise en œuvre et peut donner lieu à de puissants enseignements:
- Cela peut indiquer que les utilisateurs sont intéressés par votre contenu et votre marque.
- Les données stockées pourraient être utilisées pour l'évaluation du contenu. Si une page est incluse dans les trois pages d'un événement, elle aura peut-être plus de valeur que d'autres. Vous pouvez éventuellement cibler ces pages avec davantage d'opportunités de ventes supplémentaires ou de ventes croisées, le cas échéant.
- La même logique de notation pourrait s'appliquer aux auteurs. Si les blogs rédigés par certains auteurs ont plus de pages vues dans une session, leur style / sujet d'écriture pourrait être plus engageant et vous voudrez peut-être utiliser davantage leurs compétences en rédaction de contenu.
- Vous pouvez créer des listes d'audiences de remarketing pour cibler ces personnes apparemment engagées. Les utilisateurs doivent s'aligner sur vos objectifs commerciaux – les personnes plus impliquées dans votre contenu risquent davantage de convertir.
Discutons donc brièvement de l'anatomie du code personnalisé que vous devrez ajouter pour définir des cookies avant de passer en revue les cookies. guide d'implémentation pas à pas.
Code de cookie personnalisé
Les cookies, comme nous le savons tous, sont un petit fichier texte stocké dans votre navigateur – il aide les serveurs à se rappeler qui vous êtes et son code est composé de trois éléments. :
- une paire nom-valeur contenant des données
- une date d'expiration après laquelle elle n'est plus valide
- le domaine et le chemin du serveur auxquels il doit être envoyé.
Vous pouvez créer un code personnalisé pour ajouter aux cookies pour aider vous suivez et stockez de nombreuses pages vues dans une session sur plusieurs pages.
Le code ci-dessous constitue le fondement de la configuration de vos cookies. Il définit des règles spécifiques, telles que les événements requis pour déclencher le cookie et son expiration. Je vais fournir le code, puis le scinder en deux parties pour expliquer chaque segment.
La fonction code
if (heures) {
var date = new Date ();
date.setTime (date.getTime () + (heures * 60 * 60 * 1000)); var expires = "; expires =" + date.toGMTString ();
} else var expires = "";
document.cookie = nom + "=" + valeur + expire + "; chemin = /"; }
if (document.querySelectorAll ("Le sélecteur CSS va ici" "). Length> 0) {
var y = {{{NumberOfBlogPagesVisited}}
if (y == null) {
createCookie ('BlogPagesVisited', 1,1);
}
else if (y == 1) {
createCookie ('BlogPagesVisited', 2,1);
}
sinon si (y == 2) {
var newCount = Number (y) + 1;
createCookie ('BlogPagesVisited', newCount, 12);
}
if (newCount == 3) {
dataLayer.push ({
'event': '3 Blog Pages'
}); }
}
Partie 1
if (heures) {
var date = new Date ();
date.setTime (date.getTime () + (heures * 60 * 60 * 1000)); var expires = "; expires =" + date.toGMTString ();
} else var expires = "";
document.cookie = nom + "=" + valeur + expire + "; chemin = /"; }
Explication:
Comme son nom l’indique, cette fonction créera un cookie si vous spécifiez un nom, une valeur et la durée de validité d’un cookie. J’ai spécifié "heures", mais si vous voulez spécifier "jours", vous aurez besoin de parcourir les variables du code. Jetez un coup d'œil à cette ressource de choix sur la configuration des cookies .Partie 2
if (document.querySelectorAll ("CSS SELECTOR GOES HERE"). Length> 0) {
var y = {{{NumberOfBlogPagesVisited}}
if (y == null) {
createCookie ('BlogPagesVisited', 1,1);
}
else if (y == 1) {
createCookie ('BlogPagesVisited', 2,1);
}
sinon si (y == 2) {
var newCount = Number (y) + 1;
createCookie ('BlogPagesVisited', newCount, 12);
}
if (newCount == 3) {
dataLayer.push ({
'event': '3 Blog Pages'
}); }
Explication:
La deuxième partie de ce script comptera le nombre de pages vues:
- Le "SÉLECTEUR CSS VAIS ICI", que j'ai laissé en blanc pour l'instant, sera où vous ajoutez votre sélecteur CSS . Cela indiquera au cookie de se déclencher si le sélecteur CSS correspond à un élément d'une page. Vous pouvez utiliser DevTools pour survoler un élément de la page, tel qu'un nom d'auteur, et copier le sélecteur CSS.
- "y" représente le cookie et "NumberOfBlogPagesVisited" est le nom que j'ai donné à la variable. Vous voudrez itérer le nom de la variable comme bon vous semble, mais le nom de la variable que vous avez configuré dans GTM doit être cohérent avec le nom de la variable dans le code (nous le passerons en revue dans le guide étape par étape).
- "createCookie" est le nom réel de votre cookie. J'ai appelé mon cookie "BlogPagesVisited". Vous pouvez appeler votre cookie comme bon vous semble, mais là encore, il est impératif que le nom que vous donnez à votre cookie dans le code soit cohérent avec le champ du nom du cookie lorsque vous créez votre variable dans GTM. Sans cohérence, la balise ne se déclenchera pas correctement.
- Vous pouvez également modifier les heures auxquelles le cookie expire. Si un utilisateur accumule trois pages vues dans une seule session, le code spécifie une expiration de 12 heures. Le raisonnement derrière ceci est que si quelqu'un revient après un jour ou deux et regarde un autre blog, nous ne considérerons pas que cela fait partie de la même "session", ce qui nous donne un aperçu plus clair du comportement des utilisateurs qui en déclenchent trois. pages vues dans une session.
- C’est plutôt arbitraire, vous pouvez donc modifier la durée d’expiration du cookie en fonction de vos objectifs commerciaux et de vos clients.
Remarque: si vous souhaitez que l’événement soit déclenché après plus de trois pages vues (par exemple, exemple, vues de quatre pages), le code ressemblerait à ceci:
var y = {{NumberOfBlogPagesVisited}}
if (y == null) {
createCookie ('BlogPagesVisited', 1,1);
}
sinon si (y == 1) {
createCookie ('BlogPagesVisited', 2,1);
} }
sinon si (y == 2) {
createCookie ('BlogPagesVisited', 3,1);
}
else if (y == 3) {
var newCount = Number (y) + 1;
createCookie ('BlogPagesVisited', newCount, 12);
}
if (newCount == 4) {
dataLayer.push ({
'event': '4 Blog Pages' });
Maintenant que nous avons une compréhension de base du script, nous pouvons utiliser GTM pour tout implémenter.
Premièrement, vous devez configurer les "balises", "" déclencheurs "et" variables "suivants. ":
Balises
Balise HTML personnalisée: contient le script de cookie
Balise d'événement: déclenche l'événement et envoie les données à GA après qu'une troisième page vue soit une session.
Triggers
Trigger de la vue page : définit les conditions qui déclencheront votre balise HTML personnalisée.
Déclencheur d'événement personnalisé: définissent les conditions qui déclencheront votre événement.
Variable
Variable cookie d'origine: définit une valeur qu'un déclencheur doit avoir. Évaluez si votre balise HTML personnalisée doit être activée ou non.
Passons maintenant aux étapes de configuration de cette balise dans GTM.
Étape 1: créez une balise HTML personnalisée
Commencez par créer. une balise HTML personnalisée qui contiendra le script de cookie. Cette fois, j'ai ajouté le sélecteur CSS ci-dessous:
#content> div.post.type-post.status-publish.format-standard.hentry> div.entry-meta> span> span.author.vcard > a
Cela correspond aux auteurs des pages de blog de Distilled, vous voudrez donc ajouter votre propre sélecteur unique.
Accédez à Balises> Nouveau> Balise HTML personnalisée> et collez le script dans la zone Balise HTML personnalisée. 19659088] Vous voulez vous assurer que le nom de votre tag est descriptif et intuitif. Google recommande la convention de dénomination de balise suivante: Type de balise - Détail - Emplacement. Cela vous permettra d'identifier et de trier facilement les balises associées à partir de l'interface de balise de présentation. Vous pouvez également créer des dossiers distincts pour différents projets afin de mieux organiser votre travail.
Suivant l'exemple de Google, j'ai appelé mon tag Personnalisé HTML - Cookie de 3 pages vues - Blog.
Une fois que vous avez créé votre tag, rappelez-vous. cliquer sur enregistrer.
Étape 2: Créer un déclencheur
La création d’un déclencheur définira les conditions qui déclencheront votre balise HTML personnalisée. Si vous voulez en savoir plus sur les déclencheurs, vous pouvez lire le guide des déclencheurs de de Simo Ahava.
Naviguez jusqu'à Triggers> New> PageView.
Une fois que vous avez cliqué sur la boîte de dialogue de configuration du déclencheur, vous devez sélectionner “Vue de page” comme type de déclencheur. J'ai également nommé mon déclencheur Vue de page - Déclencheur de cookies - Blog, car je vais configurer la balise pour qu'elle se déclenche lorsque les utilisateurs atterrissent sur le contenu d'un blog.
Ensuite, vous voudrez définir les propriétés de votre déclencheur. .
Puisque nous nous appuyons sur le sélecteur CSS pour déclencher le cookie sur le site, sélectionnez “Toutes les vues de page”.
Une fois que vous avez défini votre déclencheur, cliquez sur enregistrer.
Étape 3: Créez votre variable
Tout comme une balise HTML personnalisée s'appuie sur un déclencheur, un déclencheur s'appuie sur une variable. Une variable définit une valeur dont un déclencheur a besoin pour évaluer si une balise doit être déclenchée ou non. Si vous voulez en savoir plus sur les variables, je vous recommande de lire le guide des variables de de Simo Ahava.
Rendez-vous sur Variables> Variables définies par l'utilisateur> Sélectionner le cookie 1ère partie. Vous remarquerez également que j'ai nommé cette variable «NumberOfBlogPagesVisited» - vous voudrez que ce nom de variable corresponde à ce qui est dans votre code de cookie.
Après avoir sélectionné «Cookie de la première partie», vous devez maintenant saisir Rappelez-vous que le nom du cookie a besoin de pour répliquer le nom que vous avez donné à votre cookie dans le code. J'ai nommé mon cookie BlogPagesVisited, donc je l'ai répliqué dans le champ Nom du cookie, comme indiqué.
Étape 4: créez votre balise d’événement
Lorsqu'un utilisateur déclenche une troisième page, nous souhaitons l’enregistrer et l’envoyer à l’AG. Pour cela, nous devons créer un "événement "balise.
Naviguez tout d'abord vers Balises> Nouveau> Sélection de Google Analytics - Universal Analytics:
. Une fois que vous avez défini le type de balise" Google Analytics - Universal Analytics ", assurez-vous que le type de piste est un" Event "et vous nommez votre" Catégorie "et votre" Action "en conséquence. Vous pouvez également renseigner une étiquette et une valeur si vous le souhaitez. J'ai également sélectionné ed "True" dans le champ "Absence d'interaction", car je souhaite toujours suivre les mesures du taux de rebond.
Enfin, vous devrez sélectionner une variable de paramètre GA qui transmettra les informations de cookie stockées à une propriété GA. .
Étape 5: créez votre déclencheur
Ce déclencheur référencera votre événement.
Naviguez jusqu'à Déclencheur> Nouveau> Événements personnalisés
. Une fois que vous avez sélectionné Événements personnalisés, vous devez vous assurer que “ Nom de l'événement »correspond au nom que vous avez donné à votre événement dans le code. Dans mon cas, j’ai appelé l’événement «3 pages de blog».
Étape 6: auditez votre cookie en mode prévisualisation
Une fois que vous avez sélectionné le mode prévisualisation, vous devez effectuer un audit de votre cookie pour vous assurer de son intégrité. tirer correctement. Pour ce faire, accédez au site sur lequel vous avez configuré les cookies.
Dans l’interface de débogage, allez à Vue de page> Variables.
Recherchez ensuite une URL contenant le sélecteur CSS. Dans le cas du client, nous avons utilisé le sélecteur CSS qui a référencé un auteur sur la page. Toutes leurs pages de contenu utilisaient le même sélecteur CSS pour les auteurs. À l'aide de l'outil de prévisualisation GTM, vous verrez que la variable "NumberOfBlogPagesVisited" a été exécutée.
Et le cookie "BlogPagesVisited" a été déclenché à la valeur "1" dans Chrome DevTools. Pour le voir, cliquez sur Inspecter> Application> Cookies.
Si nous ignorons la vue de la deuxième page et exécutons notre vue de la troisième page sur une autre page de blog, vous constaterez que notre événement GA et notre balise HTML personnalisée ont été déclenchés. il s’agit de la troisième page.
Vous verrez également que la troisième page a déclenché la valeur de cookie «3» dans Chrome DevTools.
Étape 7: Configurez votre segment avancé
Si vous avez configuré votre cookie, vous souhaiterez extraire les données de cookie stockées dans GA, ce qui vous permettra de manipuler les données à votre guise.
Dans GA, accédez à Comportement> Événements> Présentation> Ajouter un segment>. New Segment> Sequences> Event Action> puis ajoutez le nom de l'événement que vous avez spécifié dans votre balise d'événement. J'ai spécifié «3 vues de page de blog».
Et voilà!
Conclusion
Maintenant que vous savez configurer un cookie dans GTM, vous pouvez obtenir une foule d'informations supplémentaires sur l'engagement de votre contenu.
Vous savez également comment jouer avec l'extrait de code et indiquer le nombre de pages vues nécessaires pour déclencher l'événement cookie, ainsi que l'expiration des cookies à chaque étape, en fonction de vos besoins.
I Je voudrais savoir quels sont les autres cas d'utilisation auxquels vous pouvez penser pour ce cookie, ou quels autres types de cookies que vous avez configurés dans GTM et quelles données vous en obtenez.
Source link