Convertir une balise existante

Dans ce guide, vous apprendrez à convertir une balise HTML personnalisée existante en utiliser du code JavaScript en bac à sable ;

Ce tutoriel utilise l'API injectScript. injectScript est une valeur courante API utilisée pour convertir un tag existant qui repose sur des scripts tiers. Ces les balises configurent souvent des fonctionnalités de base pendant le chargement d'un script, avant de les enrichir avec des fonctionnalités supplémentaires après le chargement du script.

Remarque :En pratique, vous devez éviter injectScript() et implémenter à la place la le script cible directement dans le code JavaScript de bac à sable. Cela demande moins de confiance dans un Elle est donc plus susceptible d'être autorisée par les règles en vigueur.

Tag d'origine

Attention : Le script analytics.js est utilisé ici à titre d'exemple, mais il ne doit pas être utilisé en production. Suivez plutôt Déployez Google Analytics avec Tag Manager.

<!-- Google Analytics -->
<script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXXX-1', 'auto');
  ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

Convertir le code

Prenons l'exemple de la partie JavaScript de la balise ci-dessus:

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');

Pour créer le code JavaScript de bac à sable nécessaire, examinez le code JavaScript natif les API utilisées par ce script, et convertissez votre code pour utiliser l'environnement de bac à sable équivalent API JavaScript.

Par exemple, dans la balise analytics.js, les API JavaScript natives suivantes sont utilisées :

JavaScript natif	Code JavaScript de bac à sable
window.ga	setInWindow
arguments	createArgumentsQueue
+ new Date	getTimestamp

Pour utiliser les API JavaScript en bac à sable dans votre script, vous devez les require. Par exemple, pour utiliser l'API setInWindow(), ajoutez-la en haut de votre script:

const setInWindow = require('setInWindow');

Convertissez ensuite window.ga :

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)}
// becomes
const createArgumentsQueue = require('createArgumentsQueue');
const ga = createArgumentsQueue('ga', 'ga.q');

Ensuite, convertissez l'attribution ga.l:

ga.l=+new Date;
// becomes
const getTimestamp = require('getTimestamp');
setInWindow('ga.l', getTimestamp(), true);

Enfin, convertissez les deux appels en ga():

ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');
// becomes
const trackingId = data.trackingId;
ga('create', trackingId, 'auto');
ga('send', 'pageview');

Pour utiliser data.trackingId, ajoutez un champ à votre modèle:

1. Accédez à l'onglet Fields, puis cliquez sur Add Field.

   

2. Sélectionnez le type de champ Text input.

   

3. Remplacez l'ID text1 par trackingId.

   

À ce stade, vous avez converti la première balise <script/>, mais vous devez également pour charger le script secondaire.

Pour ce faire :

<script async src='https://www.google-analytics.com/analytics.js'></script>

// becomes
const injectScript = require('injectScript');
const url = 'https://www.google-analytics.com/analytics.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);

Remarque :L'URL du script est généralement une valeur cacheToken correcte.

La transmission d'un cacheToken à injectScript() active une optimisation. Pour le dans les cas suivants, le script analytics.js n'est chargé qu'une seule fois:

• Un tag exécuté plusieurs fois
• Plusieurs balises de ce modèle personnalisé dans le même conteneur.
• Autres modèles personnalisés qui utilisent des injectScript() avec le même cacheToken

Attention :N'oubliez pas de fournir le rappel data.gtmOnSuccess. à injectScript(). data.gtmOnSuccess doit être appelé pour toutes les valeurs modèles de ML. Si vous fournissez votre propre rappel de réussite, assurez-vous qu'il appelle data.gtmOnSuccess.

Autorisations

Si vous avez essayé d'exécuter ce code avant ce point, vous avez peut-être remarqué dans la console.

Ces erreurs se produisent, car le code JavaScript de bac à sable nécessite que vous déclariez le et les URL auxquelles vous accédez. Dans cet exemple, vous devez accéder à ga.q, ga.l et ga, et que vous souhaitez injecter un script hébergé à https://www.google-analytics.com/analytics.js.

Pour configurer les autorisations Global Variables :

1. Accédez à l'onglet Permissions, développez Accesses Global Variables, puis puis cliquez sur Add Key.

   

2. Utilisez ga pour la clé et cochez les cases Read, Write et Execute

   

3. Répétez cette procédure pour ga.q et ga.l. Notez qu'il n'est pas nécessaire l'autorisation Execute.

   

À ce stade, si vous cliquez à nouveau sur Exécuter le code, une nouvelle erreur s'affiche dans la console. Cette fois, l'erreur mentionne Inject Scripts.

Pour configurer l'autorisation Inject Scripts:

1. Ajoutez https://www.google-analytics.com/analytics.js à Allowed URL Match Patterns.

   

   Remarque :Le URL Match Patterns autorise les caractères génériques pour le sous-domaine et le chemin, vous auriez donc pu utiliser https://www.google-analytics.com/*. Cependant, d'autres si possible, privilégiez les modèles de correspondance spécifiques. Pour en savoir plus, consultez le Règlement sur inject_script.

Lorsque vous cliquez sur Exécuter le code, la console ne devrait afficher aucune erreur. Vous avez la balise a bien été convertie en modèle personnalisé. Cliquez sur Save. et utiliser votre nouvelle balise comme n'importe quelle autre balise dans Google Tag Manager.

Tag entièrement converti

Le résultat JavaScript final exécuté en bac à sable doit se présenter comme suit:

const setInWindow = require('setInWindow');
const copyFromWindow = require('copyFromWindow');
const createArgumentsQueue = require('createArgumentsQueue');
const getTimestamp = require('getTimestamp');
const injectScript = require('injectScript');
const trackingId = data.trackingId;

const ga = createArgumentsQueue('ga', 'ga.q');
setInWindow('ga.l', getTimestamp(), false);
ga('create', trackingId, 'auto');
ga('send', 'pageview');
const url = 'https://www.google-analytics.com/analytics.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);