JS da headline

Uma headline de texto pode carregar JavaScript personalizado, configurado no painel. O player o executa uma vez por headline escolhida, logo depois de o HTML da headline ser renderizado, na sua página.

Uma tag <script> escrita dentro do HTML da headline nunca executa. O campo de JS personalizado é o único caminho de execução.

O que o seu código recebe

Seu código roda dentro de uma função que recebe duas variáveis:

Propriedade

Tipo

Os dois nomes são reservados. Declarar const root ou let playerId no seu código impede o script inteiro de rodar — atribua a outros nomes.

O que muda por rodar dentro de uma função

Um var ou function no topo é local àquela função, não global. Se você está colando uma tag de terceiro que outros scripts da página precisam alcançar, atribua explicitamente:

window._minhaTag = ...;

Uma tag colada que se insere ao lado do próprio <script> — o padrão s.parentNode.insertBefore(node, s) — cai no <head>, não na headline, porque o player executa seu código a partir de lá. Insira em root.

O código não roda na pré-visualização do painel, só na sua página publicada. Um erro lançado pelo seu código é reportado no console do navegador e não afeta o player, a headline nem o rastreamento dela.

Alcançar a API do player

Resolva o elemento a partir do id:

// match by the end of the id: the prefix depends on the embed
var player = document.querySelector('vturb-smartplayer[id$="' + playerId + '"]');

root.querySelector(".cta").addEventListener("click", function () {
  player.play();
});

Case o elemento pelo final do id, não pelo vid-. O prefixo depende do embed, e um embed de teste A/B usa outro.

Trocar de headline

Trocar de headline executa o novo código, mas nada do anterior é desfeito. Limpe seus próprios timers e listeners se o player puder trocar de headline dentro de uma mesma visualização.

Duas headlines que compartilham o mesmo HTML e diferem só no código rodam sobre o mesmo conteúdo, não reiniciado. Faça seu script seguro para rodar duas vezes: verifique antes de inserir um nó ou registrar um listener.

Se o seu site usa Content Security Policy

A maioria não usa. Você tem uma se sua página envia um cabeçalho Content-Security-Policy ou carrega uma tag <meta http-equiv="Content-Security-Policy">. Na dúvida, pergunte a quem mantém o site, ou abra o console do navegador — uma política que está bloqueando algo imprime uma mensagem com as palavras "Content Security Policy".

Uma CSP é uma regra que seu site envia ao navegador dizendo quais scripts podem rodar, para que código que um atacante consiga injetar na página seja recusado. O navegador distingue os scripts confiáveis por um nonce: uma senha aleatória que seu servidor escolhe a cada carregamento, coloca na regra e carimba em toda tag de script em que confia. Ela muda a cada carregamento, então não dá para copiar.

Para o código da sua headline rodar, essa senha precisa chegar até ele. Três coisas fazem isso acontecer.

1. Libere o nosso endereço, para o player poder carregar:

Content-Security-Policy: script-src 'nonce-YOUR_NONCE' https://scripts.converteai.net

2. Coloque o nonce na tag do player. Mesma senha da regra, feito uma vez. Se seu site já usa nonce nos próprios scripts, inclua a tag do player junto.

index.html

<script
  nonce="YOUR_NONCE"
  src="https://scripts.converteai.net/ACCOUNT_ID/players/PLAYER_ID/v4/player.js"
  async
></script>

3. Use o embed JS. No embed em iframe o player deliberadamente não repassa o nonce, então o código da headline nunca roda lá sob uma política.

Liberar o nosso endereço mas esquecer o nonce na tag do player falha em silêncio: o player carrega, a headline mostra texto e estilo, e só o seu código não roda. O navegador registra uma mensagem de Content Security Policy no console.