De Sheets à GTM : automatiser un processus simple sur le dataLayer

Je me suis récemment un peu amusé avec Google Sheets. J’avais pour but d’automatiser la création d’un fragment de code pour Google Tag Manager, basé sur deux colonnes précédemment définies.
La première colonne avait le nom de l’évènement, et la deuxième colonne pouvait contenir plusieurs paramètres sur plusieurs lignes. Par exemple :

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
    event: 'my_event',
    page_category: '{{page_category}}',
    contact_subject: '{{contact_subject}}',
});

La première colonne doit donc contenir le code suivant :

my_event

La deuxième colonne le code suivant :

page_category
contact_subject

Implémentation

=CONCATENER("window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
        event: '";cellule;"',"
});")

Deuxième colonne

Ensuite, c’est parti pour la partie plus compliquée.
J’utilise une seule cellule pour définir mes paramètres supplémentaires. Tout de suite, je vois qu’il faut que je coupe les valeurs au niveau de la nouvelle ligne, car c’est ce que j’utilise pour définir une nouvelle valeur. J’aurais aussi pu délimiter par un autre séparateur ex : une virgule, mais la convention que l’on utilise fait que pour le moment c’est le retour à la ligne qui fait office de séparateur.

Je commence par essayer de couper cette valeur pour avoir trois valeurs distincte, sur lesquelles je pourrais travailler. L’idée étant qu’une fois que j’arrive a avoir une valeur de chaque ligne c’est plus facile d’appliquer a chaque ligne une transformation. J’essaie donc avec la fonction SPLIT. Le deuxième argument est littéralement un retour à la ligne.

=SPLIT(A1;"
")

Cela fonctionne, mais j’ai le résultat sur une ligne avec trois colonnes. Je souhaiterais plutôt avoir le résultat sur une colonne, pour les traiter plus facilement. Pour cela, j’ai découvert TRANSPOSE qui transforme une ligne en colonne. En l’appliquant directement au résultat de ma fonction SPLIT, j’obtiens bien une colonne contenant mes valeurs.

Ensuite la prochaine étape est pour chaque ligne, de récupérer la valeur et de générer le texte suivant :

valeur: '{{ valeur }}',

Pour cela, j’ai encore découvert la fonction MAP et LAMBDA. Cela fait tout de suite penser à de la programmation. Je n’étais donc pas trop perdu et j’ai pu vite comprendre le fonctionnement de ces deux fonction.
Elle prend en paramètre un tableau, et applique une fonction sur chaque élément de ce tableau. Dans le code qui suit, event correspondra a chaque valeur de chaque élément du tableau.

=MAP(TRANSPOSE(SPLIT(A1;"
")); LAMBDA(event; CONCATENER("'";event;"': {{ ";event;" }},")))

Une fois que j’ai cela, je n’ai plus qu’à joindre toutes les lignes résultantes de mon MAP en un texte. Je les JOIN par une nouvelle ligne.

JOIN("
    "; 

Ce qui donne :

=JOIN("
    "; MAP(TRANSPOSE(SPLIT(cellule; "
")); LAMBDA(event;CONCATENER("    ";event;": '{{'"; event;"}}',"))))

J’ai bien ma valeur que je n’ai plus qu’à insérer dans mon script.

Réutilisation avec des fonctions

Pour faciliter la compréhension et réutilisation, je vais créer deux fonctions nommées. Les fonctions nommées sont des fonctions que vous pouvez créer vous même qui permet de réutiliser des bouts de code comme si on utilisait une fonction native de Google Sheets, c’est-à-dire avec le même comportement qu’une fonction native telle que SUM par exemple.

Je crée la première fonction pour mon premier bout de code, celui qui ne contenait que l’événement. Je la nomme DATA_LAYER. Pour la seconde, comme elle génère les paramètres supplémentaire du dataLayer, je vais la nommer DATA_LAYER_OBJECT.

Si dessous, une capture d’écran de l’interface de création d’une fonction nommée.

Une fois ces deux fonctions créées, il faut que je modifie la première fonction pour prendre en paramètre le résultat de la seconde et l’inclure dans le script :

=CONCATENER("window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
        event: '";cellule;"',
    ";object
;"
});")

Ici object fait référence a la fonction DATA_LAYER_OBJECT. De cette manière quand je souhaite utiliser mon script, je n’ai plus qu’à lancer la fonction suivante:

=DATA_LAYER(A1; DATA_LAYER_OBJECT(B1))

Pour avoir le résultat correspondant :

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
        event: 'my_event',
        page_category: '{{'page_category}}',
        contact_subject: '{{'contact_subject}}',
});

Un dernier point : si le contenu d’une de mes colonne est vide, il y aura une erreur dans le contenu généré, et Google Sheets n’affichera pas le contenu de la cellule. Il faut donc gérer ce cas en rajoutant des conditions si le contenu de la cellule est vide.

Pour la fonction DATA_LAYER :

=CONCATENER("window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
        event: '";cellule;"',
    ";SI(ESTVIDE(object);"";object)
;"
});")

Pour la fonction DATA_LAYER_OBJECT :

=SI(ESTVIDE(cellule);"";
JOIN("
    "; MAP(TRANSPOSE(SPLIT(cellule; "
")); LAMBDA(event;CONCATENER("    ";event;": '{{'"; event;"}}',")))))

Tester avec ChatGPT si c’est possible de faire mieux et plus rapide

J’ai mis environ une heure à mettre ce bout de script en place, entre les essais, les fonctions qui ne marchaient pas, les erreur de point virgules et virgules, les erreurs de références, et les cellules vide. Je n’ai pas encore le réflexe d’aller utiliser l’intelligence artificielle pour ce genre de tâche, et pourtant c’est généralement là ou elles brillent.

Après avoir écrit cet article, j’ai donc décidé de faire le test avec ChatGPT pour voir si en moins d’une heure j’arrivais à générer le même résultat que ce que j’ai fait manuellement. Il se trouve que j’ai réussi en 20 minutes.

Voici le prompt que je lui ai envoyé :

Sur Google Sheet,
j'ai une colonne qui contient une valeur de type texte.
j'ai une deuxième colonne qui contient plusieurs valeurs de type texte, chacune séparé par un retour à la ligne.

Etant donnée l'input suivant : 
"my_event" dans la première colonne.
"page_category
contact_subject" dans la deuxième colonne,

Génère moi le code à insérer dans une troisième colonne pour avoir le résultat suivant :
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
    event: 'my_event',
    page_category: '{{'page_category}}',
    contact_subject: '{{'contact_subject}}',
});

Le formattage de cette dernière colonne est important, il faut bien garder les apostrophes, accolades et parenthèses.

Suite à ce prompt, il m’a généré un code que j’ai testé de suite. Il ne fonctionnait pas mais il me semblait pourtant correct : il reprenait les mêmes idées de SPLIT et de JOIN que j’avais de mon côté. En regardant de plus près, j’ai compris qu’il utilisait les virgules pour séparer les arguments. Il n’avais surement pas pris en compte la notion que Google Sheets utilise des point-virgules comme séparateurs. Une fois que je lui ait expliqué le problème il a corrigé le bout de code, et cela fonctionnait. Voici le code final généré par ChatGPT :

="window.dataLayer = window.dataLayer || [];" & CHAR(10) &
"window.dataLayer.push({" & CHAR(10) &
"    event: '" & A1 & "';" & CHAR(10) &
"    " & JOIN(";" & CHAR(10) & "    "; ARRAYFORMULA(SPLIT(B1; CHAR(10)) & ": '{{" & SPLIT(B1; CHAR(10)) & "}}'")) & CHAR(10) &
"});"

Je pense que s’il n’avait pas fait cette erreur de virgules, la première réponse aurait été la bonne, et le résultat aurait mis 2 minutes à être implémenté. Donc clairement, il y a une leçon pour moi a retenir pour le futur, d’essayer pour ce genre de tâche de prendre le temps de bien déconstruire le problème pour l’envoyer ensuite à ChatGPT.

Cependant, cet exercice sans intelligence artificielle m’a permis de progresser dans mon utilisation d’un tableur. Je ne pense pas que cela aurait été le cas si j’avais seulement récupéré le code de ChatGPT. J’aurais vu le code et honnêtement, je n’aurais pas voulu chercher à comprendre comment il fonctionne. Avec le recul du travail fait manuellement, je comprends plus facilement ce code. Au final je me dis qu’il n’est pas si horrible à lire. Au contraire, sur certains points, je peux trouver des améliorations à appliquer à mon propre code.

Par exemple, j’ai découvert l’utilisation de CHAR(10) grâce à ChatGPT. Au lieu d’écrire manuellement un retour à la ligne, le CHAR(10) permet de voir plus facilement que l’on souhaite utiliser un retour à la ligne.

C’est un atout des LLM : ils font penser à d’autres manières de faire. Auxquelles je n’aurais pas forcément pensé.

Conclusion

Je suis vraiment impressionné par ce qu’il est possible de faire sur Google Sheets. Je sais que je ne touche qu’à un bout de l’iceberg visible, mais le fait d’utiliser des fonctions et même de pouvoir créer les miennes, me fait beaucoup penser à de la programmation. Dans ce contexte, je retrouve facilement la logique de programmation et je peux mettre en place mon raisonnement sans être ralenti par mon manque de connaissance.

Je sais que cette connaissance peut se transmettre aussi sur Excel. La syntaxe et le fonctionnement sont très proche de Sheets. Donc c’est toujours intéressant de tester manuellement ce genre d’approches. Je pense que ça peut aussi être un atout pour aider mes collègues qui utilisent plus souvent les tableurs que moi mais qui ne profitent pas de ce genre d’automatisations.

Dernier point, je trouve la lecture des imbrications de fonctions parfois compliqué à suivre. Spécialement quand ce n’est pas moi qui ait mis en place la fonction. Je ne me suis pas penché sur une solution, peut-être qu’il en existe une. L’utilisation des fonctions nommés m’a permis de lutter contre cet inconvénient.