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é.
Tag d'origine
<!-- 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:
Accédez à l'onglet
Fields
, puis cliquez surAdd Field
.Sélectionnez le type de champ
Text input
.Remplacez l'ID
text1
partrackingId
.
À 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);
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êmecacheToken
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
:
Accédez à l'onglet
Permissions
, développezAccesses Global Variables
, puis cliquez surAdd Key
.Utilisez
ga
pour la clé, puis cochez les casesRead
,Write
etExecute
.Répétez ce processus pour
ga.q
etga.l
. Notez que ces champs ne nécessitent pas l'autorisationExecute
.
À 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
:
Ajoutez
https://www.google-analytics.com/analytics.js
àAllowed URL Match Patterns
.
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);