Convertir une balise existante

Dans ce guide, vous allez apprendre à convertir une balise HTML personnalisée existante pour utiliser du code JavaScript de bac à sable.

Ce tutoriel exploite l'API injectScript. injectScript est une API courante qui permet de convertir une balise existante qui repose sur des scripts tiers. Ces tags configurent souvent les fonctionnalités de base pendant le chargement d'un script, puis l'augmentent avec des fonctionnalités supplémentaires une fois le script chargé.

Remarque :En pratique, vous devez éviter injectScript() et implémenter le script cible directement dans le code JavaScript en bac à sable. Cette approche nécessite moins de confiance envers un tiers, ce qui augmente la probabilité d'être autorisée par des règles appliquées.

Tag d'origine

Attention :Le script analytics.js est utilisé à titre d'exemple, mais ne doit pas être utilisé en production. Suivez plutôt les instructions de la section Déployer 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

Examinez 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 les API JavaScript natives que ce script utilise et convertissez votre code pour utiliser les API JavaScript de bac à sable équivalentes.

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

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

Pour utiliser les API JavaScript de 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');

Ensuite, convertissez 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 charger le script secondaire.

Procédez comme suit :

<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 correspond généralement à une valeur cacheToken bonne.

La transmission d'un cacheToken à injectScript() active une optimisation. Dans les scénarios suivants, le script analytics.js ne sera chargé qu'une seule fois:

• Une balise exécutée plusieurs fois
• Plusieurs balises de ce modèle personnalisé se trouvent dans le même conteneur.
• Autres modèles personnalisés utilisant injectScript() avec le même cacheToken

Attention :Veillez à ne pas oublier d'indiquer le rappel data.gtmOnSuccess à injectScript(). data.gtmOnSuccess doit être appelé pour tous les modèles personnalisés. 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é des erreurs dans la console.

Ces erreurs se produisent, car le code JavaScript du bac à sable nécessite que vous déclariez les valeurs et les URL auxquelles vous accédez. Dans cet exemple, vous devez accéder aux variables globales ga.q, ga.l et ga, et vous souhaitez injecter un script hébergé à l'adresse 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 cliquez sur Add Key.

   

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

   

3. Répétez ce processus pour ga.q et ga.l. Notez que ces champs ne nécessitent pas 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 :URL Match Patterns autorise les caractères génériques pour le sous-domaine et le chemin d'accès. Vous auriez donc pu utiliser https://www.google-analytics.com/*. Toutefois, il est préférable d'utiliser des modèles de correspondance plus spécifiques, si possible. Pour en savoir plus, consultez la Règle inject_script.

Désormais, lorsque vous cliquez sur Exécuter le code, la console ne devrait plus comporter d'erreur. La balise a bien été convertie en modèle personnalisé. Cliquez sur Save et utilisez votre nouvelle balise comme n'importe quelle autre balise dans Google Tag Manager.

Balise entièrement convertie

Le résultat final du code JavaScript dans le 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);