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.

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:

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

    Agregar un campo

  2. Elige el tipo de campo Text input.

    Seleccionar entrada de texto

  3. Cambia el ID de text1 a trackingId.

    Actualiza el ID

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

Permisos

Si intentaste ejecutar este código antes de este punto, es posible que hayas notado algunos errores en la consola.

Se produjo un error cuando se accedía a los globales

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.

    Agregar clave en la IU

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

    IU de la clave para agregar de Ga

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

    Variables globales terminadas

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.

Error en la consola de inserción de secuencias de comandos

Para configurar el permiso Inject Scripts, sigue estos pasos:

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

    Secuencias de comandos de inserción finalizadas

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