En esta guía, aprenderás a convertir una etiqueta HTML personalizada existente para usar JavaScript de zona de pruebas.
En este instructivo, se aprovechará la API de injectScript
. injectScript
es una API común que se usa para convertir una etiqueta existente que se basa en secuencias de comandos de terceros. Estas etiquetas suelen configurar una funcionalidad básica mientras se carga una secuencia de comandos y, luego, aumentarla con funciones adicionales 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 código JavaScript necesario en la zona de pruebas, observa qué APIs de JavaScript nativas usa esta secuencia de comandos y convierte tu código para usar las APIs de JavaScript equivalentes en la zona de pruebas.
Por ejemplo, en la etiqueta analytics.js
, se usan las siguientes APIs de JavaScript nativas:
JavaScript nativo | JavaScript en 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');
A continuación, 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 debes cargar la secuencia de comandos compatible.
Para ello, siga 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 las siguientes situaciones, la secuencia de comandos analytics.js
solo se cargará una vez:
- Una etiqueta que se ejecuta varias veces
- 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 el JavaScript en la zona de pruebas requiere que declares los valores y las URLs a los que accedes. En este ejemplo, debes acceder a las variables globales ga.q
, ga.l
y ga
, y deseas insertar una secuencia de comandos alojada en https://www.google-analytics.com/analytics.js
.
Para configurar los permisos de Global Variables
, haz lo siguiente:
Navega a la pestaña
Permissions
, expandeAccesses Global Variables
y, luego, haz clic enAdd Key
.Usa
ga
para la clave y marca las casillas deRead
,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 Run Code, verás un error nuevo en la consola.
Esta vez, el error menciona Inject Scripts
.
Para configurar el permiso Inject Scripts
, haz lo siguiente:
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. Convertiste con éxito la etiqueta en una plantilla personalizada. Haz clic en Save
y usa tu etiqueta nueva como lo harías con cualquier otra etiqueta de Google Tag Manager.
Etiqueta convertida completamente
El resultado final de JavaScript de 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);