Ce qui suit répond à un besoin assez spécifique, mais je vous le partage. Nous allons voir comment ajouter du contenu HTML à une page à l’aide d’un script Javascript custom via Google Tag Manager.
Pré-requis
- Vous avez déjà un conteneur Google Tag Manager installé sur votre site
Création de la balise
- Allez dans Balises, cliquez sur Nouvelle ;
- Nommez votre balise comme vous le souhaitez, par exemple : Pimp my page ;
- Dans le bloc Configuration de la balise, cliquez sur le conteneur ou le picto crayon ;
- Sélectionnez HTML personnalisée ;
- Saisissez le code suivant :
<script async>
console.log("Javascript personnalisé via Google Tag Manager");
</script>
L’attribut async est très important, et en HTML5 on peut se passer de type= »text/javascript ».
Vous pouvez à présent enregistrer la balise après lui avoir affecté comme déclencheur « All Pages » par exemple. Prévisualisez le comportement de la balise pour vérifier que la console affiche bien le message « Javascript personnalisé via Google Tag Manager ».
Ajout de contenu personnalisé
Nous allons mettre en pratique le tutoriel sur cet article. Pour cela je vais créer un bloc personnalisé avec une class « zanarkand » à l’aide d’un bloc Gutenberg.
<div class="zanarkand">Je suis le bloc avec la class "zanarkand"</div>
Ce qui nous donne :
Nous allons ajouter, à la suite du bloc précédent, un bloc contenant un lien image.
Dans Google Tag Manager, dans la rubrique Balises, cliquez sur votre balise Pimp my page pour l’éditer, remplacer le code précédent par :
const newDiv = document.createElement("div");
newDiv.id = "tic";
const newImg = document.createElement("img");
newImg.src = "https://www.thanh-nguyen.fr/wp-content/uploads/2018/12/cropped-sutekidane-logo-small.png"; // Lien vers le logo de mon site
const newLink = document.createElement("a");
newLink.href = "https://www.thanh-nguyen.fr"; // Page d'accueil de mon site
newLink.appendChild(newImg);
newDiv.appendChild(newLink);
const existingDiv = document.querySelector(".zanarkand");
existingDiv.insertAdjacentElement("afterend", newDiv);
Enregistrez, et relancer la Prévisualisation. Et là … vous obtenez un message d’erreur : « Erreur du compilateur JavaScript« . Google Tag Manager ne supporte pas ES6 et notre code contient des fonctions qui ne sont pas encore (?) prises en charge.
Procédons autrement. Nous allons donc déléguer à l’internaute, et donc à son navigateur, l’interprétation du code. Pour cela il suffit de créer un fichier Javascript externe et de le lier.
Ajout de fichier javascript externe
Mon fichier externe a pour nom zanarkand.js et j’ai placé à la racine de mon site.
Dans Google Tag Manager, dans la rubrique Balises, cliquez sur votre balise Pimp my page pour l’éditer, remplacer le code précédent par :
<script async src="https://www.thanh-nguyen.fr/zanarkand.js"> </script>
Enregistrez, et relancer la Prévisualisation.
Saisissez l’URL de la page qui contiendra votre élément qui servira de repère pour l’ajout de contenu. Dans notre cas, c’est : https://www.thanh-nguyen.fr/ajouter-du-contenu-a-laide-dun-js-custom-via-google-tag-manager/
Tips : vous pouvez aussi cibler plus précisément les pages où vous voulez que le script soit intégré. Pour cela, créez un déclencheur « Page vue » en indiquant la ou les conditions.
