Convertire un tag esistente

In questa guida scoprirai come convertire un tag HTML personalizzato esistente per utilizzare JavaScript con sandbox.

Questo tutorial utilizzerà l'API injectScript. injectScript è un'API comune utilizzata per convertire un tag esistente che si basa su script di terze parti. Questi tag spesso impostano una funzionalità di base durante il caricamento di uno script, per poi aumentarla con funzionalità aggiuntive dopo il caricamento dello script.

Nota: in pratica, dovresti evitare injectScript() e implementare lo script di destinazione direttamente in JavaScript con sandbox. Ciò richiede una minore attendibilità da parte di una terza parte, il che aumenta le probabilità che sia consentita dalle norme applicate.

Tag originale

Attenzione: lo script analytics.js viene utilizzato come esempio, ma non in produzione. Consulta invece Eseguire il deployment di Google Analytics con 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 -->

Converti il codice

Considera la parte JavaScript del tag riportato sopra:

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

Per creare le API JavaScript con sandbox necessarie, guarda le API JavaScript native utilizzate da questo script e converti il codice per utilizzare le API JavaScript con sandbox equivalenti.

Ad esempio, nel tag analytics.js vengono utilizzate le seguenti API JavaScript native:

JavaScript nativo	JavaScript con sandbox
window.ga	setInWindow
arguments	createArgumentsQueue
+ new Date	getTimestamp

Per utilizzare le API JavaScript con sandbox nello script, devi requirele. Ad esempio, per utilizzare l'API setInWindow(), aggiungila all'inizio dello script:

const setInWindow = require('setInWindow');

Poi, converti window.ga:

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

Quindi, converti il compito ga.l:

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

Infine, converti le due chiamate in ga():

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

Per utilizzare data.trackingId, aggiungi un campo al modello:

1. Vai alla scheda Fields e fai clic su Add Field.

   

2. Scegli il tipo di campo Text input.

   

3. Cambia l'ID da text1 a trackingId.

   

A questo punto, hai convertito il primo tag <script/>, ma devi anche caricare lo script di supporto.

Per farlo:

<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);

Nota: l'URL dello script è generalmente un valore valido per cacheToken.

Il passaggio di un valore cacheToken a injectScript() consente l'ottimizzazione. Per i seguenti scenari, lo script analytics.js verrà caricato una sola volta:

• Un tag che viene eseguito più volte
• Più di un tag di questo modello personalizzato nello stesso contenitore.
• Altri modelli personalizzati utilizzano injectScript() con lo stesso cacheToken

Attenzione: non dimenticare di fornire il callback data.gtmOnSuccess a injectScript(). È necessario richiamare data.gtmOnSuccess per tutti i modelli personalizzati. Se fornisci il tuo callback di successo, assicurati che chiami data.gtmOnSuccess.

Autorizzazioni

Se hai provato a eseguire questo codice prima di questo punto, potresti aver notato alcuni errori nella console.

Questi errori vengono visualizzati perché il codice JavaScript con sandbox richiede di dichiarare i valori e gli URL a cui accedi. In questo esempio, devi accedere alle variabili globali ga.q, ga.l e ga e vuoi inserire uno script ospitato su https://www.google-analytics.com/analytics.js.

Per configurare le autorizzazioni Global Variables:

1. Vai alla scheda Permissions, espandi Accesses Global Variables, poi fai clic su Add Key.

   

2. Usa ga per la chiave e seleziona le caselle Read, Write e Execute.

   

3. Ripeti questa procedura per ga.q e ga.l. Tieni presente che questi campi non richiedono l'autorizzazione Execute.

   

A questo punto, se fai di nuovo clic su Esegui codice, verrà visualizzato un nuovo errore nella console. Questa volta l'errore menziona Inject Scripts.

Per configurare l'autorizzazione Inject Scripts:

1. Aggiungi https://www.google-analytics.com/analytics.js a Allowed URL Match Patterns.

   

   Nota: URL Match Patterns consente i caratteri jolly per il sottodominio e il percorso, quindi avresti potuto utilizzare https://www.google-analytics.com/*. Tuttavia, se possibile, sono preferiti pattern di corrispondenza più specifici. Consulta il criterio inject_script per i dettagli completi del criterio.

Ora, quando fai clic su Esegui codice, la console non dovrebbe visualizzare errori. Il tag è stato convertito in un modello personalizzato. Fai clic su Save e utilizza il nuovo tag come qualsiasi altro tag in Google Tag Manager.

Tag completamente convertito

Il risultato finale di JavaScript con sandbox dovrebbe avere il seguente aspetto:

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);