Converter uma tag existente

Neste guia, você vai aprender a converter uma tag HTML personalizada para usar o JavaScript no modo sandbox.

Este tutorial usará a API injectScript. A injectScript é uma API comum usada para converter uma tag existente que se baseia em scripts de terceiros. Essas tags geralmente definem a funcionalidade básica quando um script está sendo carregado e incluem um recurso adicional quando o processo é concluído.

Observação: na prática, evite o injectScript(). Implemente o script de destino diretamente no JavaScript no modo sandbox. Com isso, você dependerá menos de um terceiro, o que aumenta a probabilidade do processo ser permitido pelas políticas em vigor.

Tag original

Atenção: o script analytics.js é usado como exemplo neste guia, mas não o utilize na produção. Siga as etapas no artigo Implantar o Google Analytics com o Gerenciador de tags.

<!-- 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 -->

Converter o código

Considere a parte JavaScript da tag acima:

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 criar o JavaScript no modo sandbox necessário, observe quais APIs JavaScript nativas esse script usa e converta seu código para usar as APIs JavaScript equivalentes no modo sandbox.

Por exemplo, as seguintes APIs JavaScript nativas são usadas na tag analytics.js:

JavaScript nativo	JavaScript no modo sandbox
window.ga	setInWindow
arguments	createArgumentsQueue
+ new Date	getTimestamp

Para usar as APIs JavaScript no modo sandbox no seu script, você precisa solicitá-las usando o comando require. Por exemplo, para usar a API setInWindow(), adicione-a à parte superior do script:

const setInWindow = require('setInWindow');

Em seguida, converta window.ga:

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)}
// becomes
const createArgumentsQueue = require('createArgumentsQueue');
const ga = createArgumentsQueue('ga', 'ga.q');

Depois, converta a atribuição ga.l:

ga.l=+new Date;
// becomes
const getTimestamp = require('getTimestamp');
setInWindow('ga.l', getTimestamp(), true);

Por fim, converta as duas chamadas para 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, adicione um campo ao seu modelo:

1. Navegue até a guia Fields e clique em Add Field.

   

2. Escolha o tipo de campo Text input.

   

3. Altere o ID de text1 para trackingId.

   

Neste ponto, você já converteu a primeira tag <script/>, mas também precisa carregá-la no script de suporte.

Para isso:

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

Observação: o URL do script geralmente é um valor cacheToken adequado.

Transmitir um cacheToken para injectScript() permite uma otimização. Nos cenários a seguir, o script analytics.js será carregado apenas quando:

• uma tag for executada várias vezes;
• houver mais de uma tag desse modelo personalizado no mesmo contêiner;
• outros modelos usarem injectScript() com o mesmo cacheToken.

Cuidado: lembre-se de informar a chamada de data.gtmOnSuccess para injectScript(). É preciso chamar data.gtmOnSuccess para todos os modelos personalizados. Se você enviar seu próprio callback de sucesso, ele precisará chamar data.gtmOnSuccess.

Permissões

Se você tentou executar esse código anteriormente, deve ter notado alguns erros no console.

Esses erros aparecem porque o JavaScript no modo sandbox exige que você declare os valores e URLs acessados. Neste exemplo, você precisa acessar as variáveis globais ga.q, ga.l e ga e injetar um script hospedado em https://www.google-analytics.com/analytics.js.

Para configurar as permissões Global Variables, faça o seguinte:

1. Navegue até a guia Permissions, expanda Accesses Global Variables e clique em Add Key.

   

2. Use o ga para a chave e marque as caixas ao lado de Read, Write e Execute.

   

3. Repita esse processo para ga.q e ga.l. Esses campos não precisam da permissão Execute.

   

Nesse ponto, se você clicar novamente em Executar código, um novo erro será exibido no console. Desta vez, o erro mencionará Inject Scripts.

Para configurar a permissão do Inject Scripts, faça o seguinte:

1. Adicione https://www.google-analytics.com/analytics.js ao Allowed URL Match Patterns.

   

   Observação: o URL Match Patterns permite o uso de caracteres curinga no subdomínio e no caminho, então você pode utilizar https://www.google-analytics.com/*. No entanto, se possível, prefira padrões de correspondência mais específicos. Veja a política sobre o inject_script para saber todos os detalhes.

Agora, ao clicar em Executar código, não haverá mais erros no console. Você converteu a tag em um modelo personalizado. Clique em Save e use a nova tag como qualquer outra tag no Gerenciador de tags do Google.

Tag convertida

O resultado final do JavaScript no modo sandbox será parecido com este:

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