L’une des principales choses pour lesquelles utiliser Google Tag Manager est injection de script. Le chargement d’une bibliothèque JavaScript tierce est trivial à faire avec un Balise HTML personnaliséeet fonctionne comme un charme.
Cependant, l’utilisation de balises HTML personnalisées pour, eh bien, n’importe quoi, n’est plus le moyen préféré d’ajouter du code personnalisé au site. Les balises HTML personnalisées sont des injections DOM assez coûteuses, et elles peuvent être des outils incroyablement dangereux (pour l’expérience utilisateur, la sécurité et la confidentialité) entre de mauvaises mains et/ou inexpérimentées.
Heureusement, des modèles personnalisés ont été introduits il y a quelque temps pour aider à se débarrasser des extraits de code JavaScript personnalisés qui flottent dans le conteneur. De plus, le injectScript L’API est exactement ce que le médecin a commandé pour charger des SDK tiers via Google Tag Manager.
Veuillez noter que le chargement quelconque JavaScript tiers sur un site Web est risqué, car les attaques par injection pourraient inviter du code malveillant à être exécuté sur votre site. Si cela vous préoccupe, vous devriez jeter un œil aux politiques de sécurité du contenu et aux vérifications de l’intégrité des sous-ressources pour vous assurer que seul le code tiers correctement vérifié est exécuté sur le site.
Dans ce but, j’ai créé le CDNJS – Bibliothèques hébergées modèle de balise personnalisé. Il vous permet de charger des bibliothèques à partir du référentiel CDNJS CloudFlare.
Vous pouvez télécharger le modèle à partir de la galerie de modèles.
Utilisation d’une bibliothèque répertoriée
Le modèle vous permet soit choisir dans une liste de certaines des bibliothèques tierces les plus populaires, ou vous pouvez également simplement taper le chemin d’accès à la bibliothèque si elle ne figure pas dans la liste.
Les bibliothèques répertoriées sont :
- D3.js – une bibliothèque de visualisation.
- Dojo – un cadre pour la conception et la construction d’applications.
- Ext Core – un cadre pour la conception et la construction d’applications.
- Hammer.js – une bibliothèque pour les gestes multi-touch.
- jQuery – une bibliothèque pour les opérations DOM.
- jQuery Mobile – un cadre tactile optimisé pour les appareils mobiles et les tablettes.
- jQuery UI – une bibliothèque pour créer des interfaces utilisateur à l’aide de jQuery.
- Knockout – un framework pour créer des interfaces utilisateur réactives.
- MooTools – un cadre léger orienté objet.
- Prototype – un cadre pour la conception et la construction d’applications.
- Three.js – une bibliothèque pour créer et afficher des graphiques 3D.
- Web Font Loader – une bibliothèque pour charger des polices Web.
Lorsque vous en choisissez un, vous devez spécifier le version de la bibliothèque. Pour savoir quel numéro de version entrer, vous devez visiter CDNJS pour voir quelle est la dernière version (ou s’il y a une version plus ancienne dont vous avez besoin).
Les bénéfices d’utiliser une bibliothèque répertoriée est qu’il existe une logique interne dans le modèle qui vérifie si un méthode globale ajouté par la bibliothèque existe déjà, et dans ce cas la charge de la bibliothèque est bloqué. Ceci est utile car cela réduit la surcharge potentielle de rechargement des bibliothèques qui ont déjà été téléchargées.
Ajout manuel d’un chemin de bibliothèque
Si la bibliothèque dont vous avez besoin n’est pas dans la liste, ou si vous souhaitez éviter la vérification globale de la méthode décrite dans le paragraphe précédent, vous pouvez également ajouter le chemin de la bibliothèque en sélectionnant Entrez le chemin manuellement dans les options du modèle.
Par exemple, si vous souhaitez ajouter clickspark.js sur le site parce que vous mourez d’envie de ce petit effet scintillant à chaque clic de souris, vous devez d’abord rechercher clickspark.js dans CDNJS.
Une fois que vous avez trouvé la page de la bibliothèque, vous verrez la liste des versions disponibles et l’URL du SDK. Essayez toujours de choisir un version minifiée de la bibliothèque. Ils se terminent généralement par .min.js. Cela réduit la taille de la bibliothèque téléchargée par le navigateur de l’utilisateur.
À partir de cette URL, copiez tout de /ajax/libs/ À partir de. Pour clickspark.jstu copierais /ajax/libs/clickspark.js/1.16.0/clickspark.min.js.
Ensuite, dans le modèle, pâte ce chemin dans le champ respectif.
Le modèle a ajouté à la liste blanche toutes les URL de https://www.cdnjs.com/ajax/libsil ne devrait donc pas y avoir de problème tant que vous collez le chemin correctement.
Résumé
Il s’agit d’un modèle simple qui sert un objectif spécifique. Il vous permet d’avoir un certain contrôle sur les bibliothèques tierces chargées sur le site via Google Tag Manager.
Un gentil rappel:
Essayez de ne pas charger via Google Tag Manager tout ce qui pourrait servir un objectif plus courant que le simple suivi ou la publicité.
Par exemple, ne chargez pas jQuery via GTM si vous avez besoin de jQuery pour les fonctionnalités du site. Pourquoi? Parce que les utilisateurs peuvent bloc GTM, ce qui entraîne une expérience utilisateur gênante pour ceux qui ne souhaitent pas que Google Tag Manager se charge sur la page.
Je tiens également à souligner l’avertissement dans le chapitre d’introduction de cet article. Les bibliothèques tierces sont vulnérables aux attaques malveillantes, et en les chargeant via Google Tag Manager, vous ouvrez un vecteur d’attaque potentiel.
En dehors de cela, profitez du modèle ! Faites-moi savoir si j’ai raté une bibliothèque tierce absolument évidente qui devrait certainement figurer dans la liste !
