Google Tag Manager - RegEx Table, le tableau d'expressions régulières GTM

Dans Google Tag Manager, il y a une variable importante, la Regex Table ou en bon français, le tableau d’expression régulière. Importante au moins pour le marketing intimidé par le mot JavaScript. La présence de cette variable dans la caisse à outils GTM va vous permettre d’affiner la configuration des balises.
Peut-être avez-vous déjà utilisé la variable Lookup table ou Tableau de conversion et relevé la limite de la correspondance exacte entre la valeur entrante (input) et les valeurs de référence, notamment pour le traitement des URL, souvent très longues. Par exemple pour analyser dynamiquement la présence d’une information dans les URL , il fallait créer une variable JavaScript personnalisée.

function() {
    var inputVariable = {{Page Path}};
    var defaultVal = undefined;
    var table = [
        ['^/recettes/.+', 'recette'],
        ['^/recherche/.+/bundle/recipe.*', 'recherche'],
        ['^/idees-recettes/recettes-.+', 'recette']
    ];
    for (var i = 0, len = table.length; i < len; i += 1) {
        var regex = new RegExp(table[i][0]);
        if (regex.test(inputVariable)) {
            return table[i][1];
        }
    }
    return defaultVal;
}

Mais ce genre de script semble obsolète depuis l’arrivé de la variable « Regex Table ». Si le tableau d’expressions régulières vous épargne du JavaScript, il vous demande de vous intéresser au Regex. Si nécessaire, lisez ou relisez l’article bien nommé : apprendre les expressions régulières (Regex) avec Google Analytics.
En résumé, une expression régulière (RegEx) est un motif ou pattern utilisé pour correspondre à certaines combinaisons de caractères au sein d’une chaîne de caractères. Par exemple en reprenant l’exemple dans la page sur les expressions régulières Wikipédia : l’ensemble de mots « ex-équo, ex-equo, ex-aequo et ex-æquo » peut être condensé en un seul motif « ex-(a?e|æ|é)quo ».
Voici un petit mémo sur la base du RegEx.

Opérateurs	Déscription	Exemple	Match	Ne match pas
\	La barre oblique inversée (backslash) permet d’échapper un caractère qui ne doit pas être considéré comme un opérateur RegEx.	webanalyste\.com\/formation
^abc	L’accent circonflexe « ^ » en début d’expression signifie « commence par ».	^\/formation\/	/formation/ /formation/google-analytics	/formation /formation/google-tag-manager
abc$	Le dollar « $ » en fin d’expression signifie « se termine par ».	^\/$	/	/formation
a\|b	Le pipe (AtlGr + 6) signifie OU. A ou B.	facebook\|twitter	facebook twitter	linkedin
(abc)	Les parenthèses permettent de prioriser un traitement, de regrouper une sous-chaîne (avec capture que nous verrons plus bas, dans les paramètres avancés de la variable Table Regex.	google\-(tag\-manager\|analytics)	google-tag-manager google-analytics	google-data-studio
[abc]	Les crochets permettent de lister des caractères autorisés, a ou b ou c. Similaire de a\|b\|c.	manag[eio]r	manager managor	managar
[^abc]	Les crochets avec débutant avec un circonflexe « ^ » permettent de lister des caractères non autorisés, pas a, pas b, pas c.	manag[^eio]r	managar	manager managor
[a-z]	Les crochets avec un tiret permettent de créer une liste de caractères autorisés. [a-z] est similaire de [abcdefghijklmonpqrstuvwxyz], idem pour [A-Z] pour une correspondance en majuscule. Dans les paramètres avancés de la variable table Regex, il y une option case insensitive. [0-9] est similaire de [0123456789] ou en plus court : \d. [a-z0-9] est similaire de [abcdefghijklmonpqrstuvwxyz0123456789] ou en plus court \w.	\/article\-[1-3][a-z][a-z]\/	/article-1be/ /article-6yo/	/article-4as/ /article-r2d2/
[a-z]{3}	Les accolades permettent de préciser le nombre de répétitions du caractère précédant. [a-z]{3} = 3 lettres de a à z. [a-z]{1,3} = de 1 à 3 lettres de a à z. [a-z0-9]{,9} = 9 lettres ou chiffres maximum, de a à z et/ou chiffre de 0 à 9. [1-9]{2,} = 2 chiffres minimum de 1 à 9.	\/article\-\w{3}\/	/article-1be/ /article-4as/	/ article-r2d2/ /article-6x/
.	Le point « . » correspond à n’importe quel caractère.	.{4,10}	data_smart r2d2	un 1
*	L’astérisque « * » correspond à 0 ou plusieurs répétitions du caractère précédant – similaire de {0,}.
+	le signe plus « + » correspond à 1 ou plusieurs répétitions du caractère précédant – similaire de {1,}.
?	Le point d’interrogation « ? » correspond à 0 ou 1 répétition du caractère précédant – similaire de {,1}.

Maintenant que vous êtes outillé, avançons vers un exemple concret sur formations-analytics.com où la variable « Regex Table » sera très utile.

Comment utiliser la variable tableau d’expressions régulières GTM pour tracker les réseaux sociaux.

Le but est de tracker les 2 types d’interactions sociales sur le site, à savoir le « share » et le « join-us ». Je sais que l’URL cliquée me permet de distinguer les deux types d’interaction, en plus d’identifier le nom du réseau. La première intègre souvent une sémantique liée au partage, tandis que la seconde intègre les identifiants des pages sur les réseaux sociaux.
Voici l’approche.

Faire l’inventaire des URL de référence des réseaux sociaux.
Créer une variable « social action » de type « Table Regex » pour identifier l’action.
Créer une variable « social name » de type « Table Regex » pour identifier le nom du réseau.
Créer un déclencheur à partir de la variable « social action ».
Utiliser le déclencheur pour activer une balise event Google Analytics pour reporter les variables à chaque interaction « social ».

Faire l’inventaire des URL de référence des réseaux sociaux.
Là, rien de bien compliqué, il suffit de faire clique droit sur chaque type de lien « social », puis de copier l’adresse du lien dans un fichier texte, comme Notepad++.
Voici les principales URL sortantes du site formations-analytics.com.

Liens "share"
https://www.facebook.com/sharer/sharer.php?u=https://www.formations-analytics.com/
https://twitter.com/intent/tweet?source=webclient&original_referer=https://www.formations-analytics.com/&text=Collecter%20des%20donn%C3%A9es%20ecommerce%20concurrent%20avec%20Google%20Sheets%20et%20Data%20Studio&url=https://www.formations-analytics.com/&related=webanalyste&via=webanalyste
https://plus.google.com/share?url=https://www.formations-analytics.com/
https://pinterest.com/pin/create/bookmarklet/?media=https://www.formations-analytics.com/wp-content/uploads/2017/08/srapping-ecommerce-google-sheet-data-studio-dashboard-visu.gif&url=https://www.formations-analytics.com/&title=Collecter%20des%20donn%C3%A9es%20ecommerce%20concurrent%20avec%20Google%20Sheets%20et%20Data%20Studio&description=
https://www.viadeo.com/?url=https://www.formations-analytics.com/&title=Collecter%20des%20donn%C3%A9es%20ecommerce%20concurrent%20avec%20Google%20Sheets%20et%20Data%20Studio
https://www.linkedin.com/shareArticle?mini=true&ro=true&trk=JuizSocialPostSharer&title=Collecter%20des%20donn%C3%A9es%20ecommerce%20concurrent%20avec%20Google%20Sheets%20et%20Data%20Studio&url=https://www.formations-analytics.com/
Liens "join-us"
https://plus.google.com/111252622894219085928?rel=author
http://fr.linkedin.com/in/fscandolera
Tweets by webAnalyste
https://www.facebook.com/webanalyste/

Une fois qu’on a une vision globale des URL à considérer, on va les simplifier pour avoir une base distinctive facilement utilisable dans Google Tag Manager. Le but est de garder la substantifique moelle qui permette de distinguer un lien « social » des autres liens du site. On verra dans GTM, comment ajouter des critères distinctifs avec les expressions régulières.

Liens "share-it"
facebook.com/sharer
twitter.com/intent/tweet
plus.google.com/share
pinterest.com/pin/create
viadeo.com/?url
linkedin.com/shareArticle
Liens "join-us"
plus.google.com/111252622894219085928
linkedin.com/in/fscandolera
twitter.com/webAnalyste
facebook.com/webanalyste

Créer une variable « social action » de type Table Regex pour identifier le type d’interaction « social ».

La variable Table Regex (tableau d’expressions régulières) fonctionne comme la lookup table (Tableau de conversion). Elle compare la valeur d’une variable entrante avec celles que vous avez définies dans chaque ligne de la variable. L’avantage d’utiliser une expression régulière c’est de pouvoir analyser une correspondance relative et complexe. La variable Table Regex peut être très puissante dans le traitement de l’information en la combinant avec d’autres variables GTM.
La table regex de la variable « social action », testera les {{Click URL}} pour vérifier la correspondance avec l’une des URL simplifiées et regexées. Le traitement Regex se limite à échapper « \ » tous les caractères (point, slash, tiret, point d’interrogation…) qui de doivent pas être considéré comme des opérateurs Regex. Sans cela, la correspondance ne fonctionnera pas.
Liens « share-it »

facebook\.com\/sharer
twitter\.com\/intent\/tweet
plus\.google\.com\/share
pinterest\.com\/pin/create
viadeo\.com/\?url
linkedin\.com\/shareArticle

Liens « join-us »

plus\.google\.com\/111252622894219085928
linkedin\.com\/in\/fscandolera
twitter\.com\/webAnalyste
facebook\.com\/webanalyste

En regardant le visuel ci-dessus, vous souriez, vous pensez que ce n’est pas si compliqué que « CA », et vous avez raison. Sauf que « CA » peut être cruel. Pour qu’il y est une correspondance, il faut 2 valeurs, l’input et la ligne d’expression régulière. La seconde, on maîtrise, mais quand est-il de la première, « {{Click URL}} ». Une valeur qui correspond à l’URL de l’élément cliqué.
Dans mon cas, j’ai identifié deux cas particuliers :

L’URL cliquée est directement disponible dans l’élément DOM cliqué et alimente la variable {{Click URL}}. Version simple.
L’URL cliquée n’est directement disponible dans l’élément DOM cliqué et donc n’alimente pas la variable {{Click URL}}. Mais l’information est disponible au niveau du parent de l’élément DOM clické. Version complexe.

Pour gérer ces deux cas, je vais créer une variable JavaScript « Click URL enfant parent » qui renverra l’URL au moment du click {{Click URL}} si elle est disponible, sinon elle renverra l’URL contenue dans l’élément parent de l’élément cliqué.

 function() {
    return ({{Click URL}}) ? {{Click URL}} : {{Click Element}}.parentNode.href;
  }

Maintenant que je peux tester l’URL de l’élément enfant ou parent cliqué avec mes URL simplifiées, ma variable « social action » est terminée. Il ne me reste plus qu’à dupliquer cette variable pour créer la variable « social name ».

Créer une variable « social name » de type Table Regex pour identifier le nom du réseau social.

À partir de la copie de la variable « social action », changez le nom et réduisez les URL de référence jusqu’au nom de domaine pour identifier les noms des réseaux. Pour les valeurs output correspondantes, vous devriez vous en sortir tout seul.

facebook\.com
twitter\.com
plus\.google\.com
pinterest\.com
viadeo\.com
linkedin\.com

Vous pouvez également utiliser une expression régulière plus complexe pour extraire le nom de domaine du lien cliqué.

^https://.*(twitter|facebook|google|viadeo|linkedin)\.com.+

Pour cela, il faut activer l’option » Activer la fonctionnalité de groupe de capture et de remplacement » pour extraire des sous-chaînes de caractères entre parenthèses () en se référant à leur position avec un $n (n = position de gauche à droite, de 1 à n).
Par exemple, « campaign_(facebook)_(noel)_(201712) » $1 = « facebook », $2 = « noel » et $3 = « 201712 », en mode « extraction », je peux utiliser ces $n pour alimenter une valeur output en les concaténant par exemple, $3_$1 (= « 201712_facebook »).

Ou plus simplement mais moins personnalisable, créer une variable « URL » basé le sur le hostname de ma variable « Click URL enfant parent ».

Créer un déclencheur « click social » à partir de la variable « social action ».

Le gros du travail a été fait et créer ce déclencheur relève de la friandise.
Alors, quelle condition utiliser dans notre déclencheur pour activer la balise de l’event Google Analytics au moment d’un clic sur un lien Social ?
[accordions accordion_swatch= »swatch-blanc »]
[accordion title= »Réponse » state= »closed »]
{{social action}} :: match regex :: share|join\-us
[visuel trigger]
[/accordion]
[/accordions]