Nouveau client de conteneur Web Google Tag Manager pour le balisage côté serveur

Avec l’introduction du balisage côté serveur dans Google Tag Manager, la variété de choses que vous pouvez faire avec votre propre côté serveur Procuration est ahurissant :

• Réduire ballonnement côté client en consolidant les flux de données et en les distribuant aux terminaux des fournisseurs côté serveur.
• Améliorer sécurité des données en ajoutant des protections et des validations pour empêcher l’envoi de données nuisibles aux points de terminaison des fournisseurs.
• Enrichir côté serveur de données, en combinant le flux de données entrant avec les données des API et des magasins de données que vous possédez et contrôlez.
• Éliminer tierce personne téléchargements à partir du navigateur en les mettant en proxy via le conteneur côté serveur.

C’est sur ce dernier point que cet article se développe. Si vous regardez cette vidéo (passez directement à la partie pertinente), vous pouvez voir comment il est déjà possible de proxy des bibliothèques populaires comme analytics.js et gtag.js.

Essentiellement, le conteneur côté serveur télécharge la bibliothèque de Google, puis la sert au navigateur. De cette façon, le téléchargement de la bibliothèque se produit dans un contexte propriétaire (en supposant que vous avez configuré le point de terminaison pour qu’il s’exécute sur votre propre espace de noms de domaine), et vous pouvez librement ajuster des éléments tels que les en-têtes de cache.

Avec une mise à jour récente, le conteneur de serveur de Google Tag Manager vous permet désormais de proxy un Conteneur Web Google Tag Manager aussi.

Comment ça fonctionne

Les Google Tag Manager : conteneur Web Le modèle de client est pré-intégré dans les conteneurs de serveur. Pour l’activer, vous devez créer un nouveau client avec.

Naviguez jusqu’à Clients dans l’interface utilisateur de Google Tag Manager et cliquez sur pour créer un nouveau client.

Clique le Configuration des clients boîte pour ouvrir un sélecteur. Trouvez le Google Tag Manager : conteneur Web modèle de client, puis cliquez dessus pour le sélectionner.

Pour configurer le client, vous devez essentiellement lister le gestionnaire de balises Google ID de conteneur qui devrait être proxy via ce client.

Pour ajouter un nouvel ID, cliquez simplement sur Ajouter un ID de conteneuret ajoutez-le à la liste.

Depuis le ID de conteneur autorisés peut également prendre des variables, vous pouvez théoriquement créer une variable qui récupère directement l’ID du conteneur à partir de l’URL de la requête (c’est-à-dire tout ce qui suit ?id= dans https://server-container.com/gtm.js?id=GTM-ABCDEFG). Cependant, je pense que c’est une bonne idée de ne pas créer un tel système pour éviter que le point de terminaison ne soit spammé avec des demandes de conteneurs sans rapport avec votre configuration.

Une fois que vous Sauver ce client, votre conteneur de serveur est maintenant activé pour répondre aux demandes de conteneurs Web Google Tag Manager. Une requête standard pour un conteneur Web ressemblerait à ceci :

https://www.googletagmanager.com/gtm.js?id=GTM-ABCDEFG

Avec le client que vous avez configuré, vous pouvez maintenant émettre la requête comme ceci :

https://your.server.container.com/gtm.js?ID=GTM-ABCDEFG

Votre point de terminaison côté serveur renverra la bibliothèque Google Tag Manager dans le même format que l’extrait de code normal, à la différence qu’il est diffusé à partir de ton point de terminaison et non le CDN de Google.

Mettre à jour l’extrait

Vous devrez bien sûr mettre à jour votre extrait de conteneur Google Tag Manager en conséquence.

REMARQUE! La mise à jour ci-dessous s’applique également aux environnements, car le nouveau modèle de client a également été conçu pour fonctionner avec les environnements.

Voici à quoi ressemble un extrait conteneur standard de Google Tag Manager :

<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PZ7GMV9');</script> <!-- End Google Tag Manager -->

Vous devez changer la chaîne 'https://www.googletagmanager.com/gtm.js?id=' pour correspondre au domaine que vous avez créé pour votre point de terminaison côté serveur. Si votre conteneur sert de https://sgtm.simoahava.coml’extrait mis à jour ressemblerait à ceci :

<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://sgtm.simoahava.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PZ7GMV9');</script> <!-- End Google Tag Manager -->

Une fois que vous avez mis à jour l’extrait de code, vous pouvez passer le conteneur Server en mode débogage et voir s’il répond aux demandes du conteneur GTM :

Vous devez également vérifier où la demande de gtm.js bibliothèque est envoyée à l’aide des outils réseau de votre navigateur :

Et, bien sûr, assurez-vous que toutes vos balises fonctionnent comme elles le devraient en utilisant les outils de débogage dont vous disposez.

À noter

Actuellement, les conteneurs de zone continueront de se charger à partir de googletagmanager.commais cela sera probablement corrigé sous peu pour les charger également à partir de votre point de terminaison côté serveur.

Lorsque vous choisissez de diffuser le conteneur Google Tag Manager à partir de votre propre domaine propriétaire et vous envoyez également des données à un client Universal Analytics et/ou GA4, vous devez vous assurer d’activer le gtag chemins dans ces clients. En effet, une fois que vous passez au chargement du conteneur Google Tag Manager à partir de votre domaine propriétaire, tout gtag.js les bibliothèques chargées via ce conteneur seront également doivent être chargés à partir de votre domaine propriétaire. Assurez-vous donc de vérifier les options appropriées si vous utilisez ces deux clients.

REMARQUE! Si vous voulez proxy le analytics.js bibliothèque de votre domaine côté serveur, vous devez également vérifier la chemins gtag option et ajouter le UA-XXXXX-Y à la liste. Ce paramètre s’applique également à cette bibliothèque.

La dernière chose à noter est que le <noscript> L’extrait de code peut également être modifié pour charger l’iframe à partir de votre point de terminaison propriétaire. La seule mise en garde est que la page HTML dans l’iframe continuera à charger des éléments à partir de googletagmanager.com.

Au cas où vous vous poseriez la question, oui: la vérification de la console de recherche fonctionnera avec votre nouveau premier <noscript> extrait aussi !

Résumé

Même si vous ne le faites absolument pas avoir d’utiliser un conteneur Web lorsque vous travaillez avec des balises côté serveur, je pense que beaucoup de gens le font et continueront de le faire en raison de la facilité avec laquelle Google Tag Manager apporte des balises à un site Web.

La possibilité de proxy le conteneur Google Tag Manager présente des avantages évidents pour le déplacement de scripts tiers vers un contexte de première partie.

Vous êtes, bien sûr, techniquement téléchargeant toujours le code JavaScript du fournisseur à partir de leur CDN. Cependant, ce téléchargement se produit dans le conteneur du serveur et le navigateur n’aura accès qu’à un chemin de requête-réponse avec votre conteneur de serveur et non avec le point de terminaison du fournisseur lui-même.

L’introduction du proxy de conteneur Google Tag Manager dans votre conteneur de serveur peut avoir un impact sur les coûts associés à la configuration de votre balisage côté serveur. Assurez-vous donc de surveiller la facturation dans votre tableau de bord Google Cloud Platform.

Faites-moi savoir dans les commentaires ce que vous pensez de ce nouvel ajout au mix client intégré de marquage côté serveur !