Cómo convertir una etiqueta existente

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.

Nota: En la práctica, debes evitar injectScript() y, en su lugar, implementar el de la secuencia de comandos de destino directamente en el código JavaScript de la zona de pruebas. Esto requiere menos confianza en un De terceros, lo que aumenta las probabilidades de que las políticas aplicadas lo permitan

Etiqueta original

Precaución: La secuencia de comandos analytics.js se usa como ejemplo aquí, pero esto debería no deben usarse en la producción. En cambio, sigue Implementa 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 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:

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

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

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

Precaución: Asegúrate de proporcionar la devolución de llamada data.gtmOnSuccess. a injectScript(). Se debe llamar a data.gtmOnSuccess para todos los eventos personalizados. plantillas. Si proporcionas tu propia devolución de llamada de éxito, asegúrate de que llame 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 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:

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

   

2. Usa ga para la clave y marca las casillas correspondientes a 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 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:

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

   

   Nota: El 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 específicos si es posible. Consulta la En la política deinject_script, consulta todos los detalles de la política.

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