La bibliothèque JavaScript jQuery est par presque tous les moyens de compter la bibliothèque JavaScript la plus populaire utilisée dans les sites Web du monde entier. Il est si influent, en fait, que son évolution est étroitement liée à l’effort de normalisation JavaScript lui-même, et il fait partie intégrante des efforts de la JS Foundation pour créer une communauté pour les développeurs JavaScript.

Google Tag Manager, de même, est le système de gestion de balises le plus populaire utilisé dans les sites Web, à l’échelle mondiale. Ainsi, en raison d’une faible corrélation, il est logique de s’attendre à une certaine synergie entre les deux.

Dans cet article, je veux explorer la relation entre les deux outils. Les deux servent un objectif similaire – abstraction et facilitation de faire des trucs avec JavaScript sur une page Web. Je veux également dissiper un mythe sur Google Tag Manager regroupant jQuery nativement, et je veux explorer quand cela pourrait avoir du sens ne pas pour utiliser jQuery.

Non, Google Tag Manager n’est pas fourni avec la bibliothèque jQuery

Certaines personnes ont jeté un coup d’œil dans les profondeurs de gtm.js bibliothèque téléchargée par le navigateur lors de l’exécution de l’extrait de conteneur. Cette bibliothèque contient le conteneur GTM dans toute sa splendeur. Dans le code JavaScript minifié et obscurci, les yeux avertis peuvent trouver le commentaire suivant :

Ce commentaire pourrait vous inciter à penser que GTM regroupe la bibliothèque jQuery complète dans le conteneur JavaScript.

Ce n’est pas le cas.

Le commentaire est là car Google Tag Manager utilise une méthode fortement inspirée d’une fonctionnalité similaire de la bibliothèque jQuery. Vous pouvez en trouver la source dans le projet GitHub data-layer-helper, où le is_plain_object.js contient l’explication de la raison pour laquelle il existe un avis de licence comme celui-ci :

D’ailleurs, le assistant de couche de données projet est un excellent moyen de se familiariser avec le fonctionnement du modèle de données interne de GTM !

Vérifiez si jQuery est déjà en cours d’exécution

Il y a de fortes chances que votre site exécute déjà jQuery. Vous pouvez le tester en ouvrant le ConsoleJavaScript dans votre navigateur Web préféré. Une fois la console ouverte, saisissez le texte suivant et appuyez sur Entrée :

typeof window.jQuery !== 'undefined' ? console.log(window.jQuery.fn.jquery) : 'jQuery not found!' 

Si votre site exécute jQuery, vous verrez la sortie du numéro de version dans la console. Si votre site est ne pas exécutant jQuery, vous verrez le texte : jQuery not found!.

Si jQuery a été trouvé, vous pouvez provisoirement utilisez-le dans vos balises HTML personnalisées et vos variables JavaScript personnalisées.

Cependant, jQuery est (ou du moins devrait être) chargé de manière asynchrone, ce qui signifie qu’il peut y avoir une condition de concurrence dans laquelle vous essayez d’appeler ses méthodes à l’aide de GTM avant que la bibliothèque jQuery ne soit réellement chargée. Ainsi, chaque fois que vous souhaitez utiliser jQuery, vous devez le protéger avec certaines garanties.

Utiliser jQuery en toute sécurité

En gros, si vous souhaitez utiliser jQuery, vous devez toujours vérifier s’il a été initialisé avec quelque chose comme ceci :

if (typeof window.jQuery !== 'undefined') {   // Do something with jQuery } else {   // Fallback in case jQuery hasn't been loaded } 

Si jQuery est trouvé, vous pouvez l’utiliser à volonté, et s’il n’est pas trouvé, le else block est la solution de repli que vous utiliserez dans de tels cas. Voici un exemple :

function() {   var el = {{Click Element}};   if (typeof window.jQuery !== 'undefined') {     return window.jQuery(el).find('h1').text();   } else {     return el.querySelector('h1').textContent;   } } 

Le code dans le if bloc et le code dans le else bloc sont essentiellement la même chose, bien que jQuery présente certains avantages, comme s’assurer que text() renvoie le contenu du texte quel que soit le type et la version du navigateur.

Charger jQuery à l’aide de Google Tag Manager

Si jQuery n’est pas utilisé par votre site et que vous souhaitez toujours en tirer parti, vous pouvez toujours le charger dans une balise HTML personnalisée.

Première, discutez-en avec vos développeurs. jQuery peut introduire un peu de gonflement dans la page, et les développeurs ont peut-être eu une bonne raison de ne pas utiliser jQuery du tout. Il est possible qu’ils utilisent une autre bibliothèque qui a la même fonctionnalité.

La meilleure façon de charger jQuery est d’utiliser une balise HTML personnalisée dans une séquence de balises avec la ou les balises dont vous disposez et qui pourraient avoir besoin d’utiliser jQuery.

Commençons par voir à quoi ressemble la balise HTML personnalisée :

<script>   (function() {     var el = document.createElement('script');     el.src = 'https://code.jquery.com/jquery-3.3.1.min.js';     el.async = true;     el.addEventListener('load', function() { window.google_tag_manager[{{Container ID}}].onHtmlSuccess({{HTML ID}})});     el.addEventListener('error', function() { window.google_tag_manager[{{Container ID}}].onHtmlFailure({{HTML ID}})});     document.head.appendChild(el);   })(); </script>

Vous devrez activer le Identifiant du conteneur et Identifiant HTML variables intégrées pour cela. Faire ne pas ajouter des déclencheurs à cette balise.

Fondamentalement, vous créez un asynchrone <script> requête de chargement pour la bibliothèque jQuery à partir du propre CDN (réseau de distribution de contenu) de jQuery. Parce que c’est asynchrone, vous ajoutez également un load écouteur, qui se déclenche lorsque la bibliothèque a été chargée avec succès, et un error listener, qui se déclenche si la bibliothèque n’a pas pu être chargée en raison d’une erreur.

Ce n’est pas parfait, car parfois, le simple fait que la bibliothèque soit chargée ne signifie pas qu’elle a réussi à s’exécuter correctement (s’il y a des conflits dans l’espace de noms global de la page, par exemple), et une erreur n’est pas toujours générée si la bibliothèque ne se charge pas.

Une fois que vous avez créé cette balise HTML personnalisée, faites défiler jusqu’à son Réglages avancéset réglez son Options de déclenchement des balises pour Une fois par page.

En effet, quel que soit le nombre de séquences de balises dans lesquelles il se trouve, vous ne souhaitez charger la bibliothèque jQuery qu’une seule fois par page.

Ensuite, vous devez ouvrir chaque balise nécessitant jQuery, faites défiler jusqu’à leur Réglages avancéset ajoutez le chargeur jQuery en tant que installer tag dans la séquence :

Si vous souhaitez bloquer l’exécution de la balise dans le cas où jQuery n’a pas charge, vous pouvez cocher la case “Ne tirez pas tag si setup_tag échoue ou est en pause ». Mais c’est un peu drastique. Au lieu de cela, vous voudrez peut-être simplement voir l’astuce du chapitre précédent pour exécuter une solution de secours au cas où jQuery n’est pas trouvé.

Je veux répéter ce que j’ai écrit ci-dessus: discutez d’abord avec vos développeurs. jQuery n’est pas gros, mais c’est quand même gonflé si vous n’en avez besoin que pour une poignée de choses. Ce qui m’amène au point suivant.

Vous n’êtes pas toujours obligé d’utiliser jQuery

Découvrez ce merveilleux site Web : Vous n’avez peut-être pas besoin de jQuery. C’est un service qui vous aide à réécrire les méthodes jQuery à l’aide de JavaScript vanille.

Si vous n’avez besoin de jQuery que pour une poignée de choses, il peut être préférable d’utiliser simplement des méthodes JavaScript natives plutôt que de charger une bibliothèque entière pour effectuer des tâches simples.

Voici mes propres règles de base personnelles :

1. Si le site charge déjà la librairie jQuery, utilisez-le à volonté. Assurez-vous simplement d’éviter les conditions de concurrence si jQuery est chargé de manière asynchrone (comme il se doit).

2. Si le site n’exécute pas jQuery, regardez la complexité des tâches que vous voulez faire. Si vous n’avez besoin que d’effectuer une simple traversée du DOM ou des requêtes HTTP triviales, envisagez d’utiliser du JavaScript natif plutôt que de charger la bibliothèque.

3. Si vous devez charger jQueryutiliser un récent, minifié version de la bibliothèque. Charge le de manière asynchroneet utilise séquençage des balises pour s’assurer que la dépendance a été chargée avant d’être utilisée par la balise principale.

Résumé

jQuery est un excellent outil de développement Web. Il y a une raison pour laquelle c’est la bibliothèque JavaScript la plus populaire sur le Web.

Cependant, le JavaScript natif est également extrêmement utile, même si vous avez peut-être saisi des caractères supplémentaires par rapport aux méthodes d’assistance de jQuery.

J’ai toujours essayé d’éviter d’utiliser jQuery ou, vraiment, toute bibliothèque d’assistance, car je pense qu’il est important de comprendre comment fonctionne le moteur JavaScript sous-jacent dans le navigateur. Si vous utilisez toujours jQuery, vous ignorerez facilement des éléments tels que les nuances de la prise en charge des navigateurs, l’optimisation des performances et la manière d’écrire un bon code lisible en général.

Semblable à Google Tag Manager, jQuery est un excellent outil, mais vous devez gagner le droit de l’utiliser en comprenant comment cela fonctionne sur la page Web. L’ignorance de ce que jQuery fait réellement peut conduire à des résultats catastrophiques, lorsque vous écrivez du code critique dans vos balises, en vous appuyant sur une version obsolète de jQuery ou en utilisant des méthodes qui tuent totalement les performances.