En esta guía, aprenderás cómo convertir una etiqueta HTML personalizada en usar JavaScript de zona de pruebas.
En este instructivo, se aprovechará la API de injectScript
. injectScript
es un tema común
Es la API que se usa para convertir una etiqueta existente que se basa en secuencias de comandos de terceros. Estos
A menudo, las etiquetas configuran funcionalidades básicas mientras se carga una secuencia de comandos y la amplían con
funcionalidad adicional después de que se carga la secuencia de comandos.
Etiqueta original
<!-- 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 -->
Cómo convertir el código
Considera la parte de JavaScript de la etiqueta anterior:
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');
Para crear el JavaScript necesario en la zona de pruebas, observa qué JavaScript nativo APIs que usa esta secuencia de comandos y convierten tu código para usar la zona de pruebas equivalente APIs de JavaScript.
Por ejemplo, en la etiqueta analytics.js
, se usan estas APIs nativas de JavaScript:
JavaScript nativo | JavaScript de zona de pruebas |
---|---|
window.ga |
setInWindow |
arguments |
createArgumentsQueue |
+ new Date |
getTimestamp |
Para usar las APIs de JavaScript de zona de pruebas en tu secuencia de comandos, debes require
.
Por ejemplo, para usar la API de setInWindow()
, agrégala a la parte superior de la secuencia de comandos:
const setInWindow = require('setInWindow');
Luego, convierte window.ga
:
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)}
// becomes
const createArgumentsQueue = require('createArgumentsQueue');
const ga = createArgumentsQueue('ga', 'ga.q');
Luego, convierte la asignación ga.l
:
ga.l=+new Date;
// becomes
const getTimestamp = require('getTimestamp');
setInWindow('ga.l', getTimestamp(), true);
Por último, convierte las dos llamadas a ga()
:
ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');
// becomes
const trackingId = data.trackingId;
ga('create', trackingId, 'auto');
ga('send', 'pageview');
Para usar data.trackingId
, agrega un campo a tu plantilla:
Navega a la pestaña
Fields
y haz clic enAdd Field
.Elige el tipo de campo
Text input
.Cambia el ID de
text1
atrackingId
.
En este punto, ya convertiste la primera etiqueta <script/>
, pero también necesitas
se cargará en la secuencia de comandos complementaria.
Para ello, sigue estos pasos:
<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);
Pasar un cacheToken
a injectScript()
habilita una optimización. Para el
En las siguientes situaciones, la secuencia de comandos analytics.js
solo se cargará una vez:
- Una etiqueta que se ejecuta varias veces
- Hay más de una etiqueta de esta plantilla personalizada en el mismo contenedor.
- Otras plantillas personalizadas que usan
injectScript()
con el mismocacheToken
Permisos
Si intentaste ejecutar este código antes de este punto, es posible que hayas notado algunos errores en la consola.
Estos errores aparecen porque JavaScript en la zona de pruebas requiere que declares el
y las URLs a las que accedes. En este ejemplo, debes acceder a ga.q
,
ga.l
y ga
variables globales, y quieres insertar una secuencia de comandos alojada
a las https://www.google-analytics.com/analytics.js
.
Para configurar los permisos Global Variables
, sigue estos pasos:
Ve a la pestaña
Permissions
, expandeAccesses Global Variables
y y, luego, haz clic enAdd Key
.Usa
ga
para la clave y marca las casillas correspondientes aRead
,Write
yExecute
Repite este proceso para
ga.q
yga.l
. Ten en cuenta que estos campos no necesitan el permisoExecute
.
En este punto, si vuelves a hacer clic en Ejecutar código, verás un nuevo error en la consola.
Esta vez, el error menciona Inject Scripts
.
Para configurar el permiso Inject Scripts
, sigue estos pasos:
Agrega
https://www.google-analytics.com/analytics.js
aAllowed URL Match Patterns
.
Ahora, cuando hagas clic en Run Code, no debería haber errores en la consola. Tienes
convirtió correctamente la etiqueta en una plantilla personalizada. Haz clic en Save
.
y usar tu etiqueta nueva como cualquier otra etiqueta de Google Tag Manager.
Etiqueta convertida por completo
El resultado final de JavaScript en la zona de pruebas debería verse así:
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);