Cómo convertir una etiqueta existente

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.

Nota: En la práctica, debes evitar usar injectScript() y, en su lugar, implementar la secuencia de comandos de destino directamente en JavaScript de zona de pruebas. Esto requiere menos confianza en un tercero, lo que aumenta las probabilidades de que se le permita mediante políticas aplicadas.

Etiqueta original

Precaución: La secuencia de comandos analytics.js se usa como ejemplo aquí, pero no debe usarse en producción. En su lugar, consulta Cómo implementar 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 -->

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:

1. Navega a la pestaña Fields y haz clic en Add Field.

   

2. Elige el tipo de campo Text input.

   

3. Cambia el ID de text1 a trackingId.

   

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

Nota: La URL de la secuencia de comandos suele ser un buen valor de cacheToken.

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 mismo cacheToken

Precaución: Asegúrate de no olvidar proporcionar la devolución de llamada data.gtmOnSuccess a injectScript(). Se debe llamar a data.gtmOnSuccess para todas las plantillas personalizadas. Si proporcionas tu propia devolución de llamada de éxito, asegúrate de que llame a data.gtmOnSuccess.

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:

1. Navega a la pestaña Permissions, expande Accesses Global Variables y, luego, haz clic en Add Key.

   

2. Usa ga para la clave y marca las casillas de Read, Write y Execute.

   

3. Repite este proceso para ga.q y ga.l. Ten en cuenta que estos campos no necesitan el permiso Execute.

   

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:

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

   

   Nota: URL Match Patterns permite comodines para el subdominio y la ruta de acceso, por lo que podrías haber usado https://www.google-analytics.com/*. Sin embargo, se prefieren patrones de coincidencia más específicos si es posible. Consulta la política inject_script para obtener los detalles completos de la política.

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