JS del titular

Un titular de texto puede llevar JavaScript personalizado, configurado en el panel. El reproductor lo ejecuta una vez por titular elegido, justo después de que el HTML del titular se renderiza, en tu página.

Una etiqueta <script> escrita dentro del HTML del titular nunca se ejecuta. El campo de JS personalizado es la única vía de ejecución.

Qué recibe tu código

Tu código corre dentro de una función que recibe dos variables:

Propiedad

Tipo

Ambos nombres están reservados. Declarar const root o let playerId en tu código impide que el script entero corra — asigna a otros nombres.

Qué cambia por correr dentro de una función

Un var o function de nivel superior es local a esa función, no global. Si estás pegando una etiqueta de terceros que otros scripts de la página necesitan alcanzar, asígnala explícitamente:

window._miEtiqueta = ...;

Una etiqueta pegada que se inserta junto a su propio <script> — el patrón s.parentNode.insertBefore(node, s) — acaba en <head>, no en el titular, porque el reproductor ejecuta tu código desde allí. Inserta en root.

El código no corre en la vista previa del panel, solo en tu página publicada. Un error lanzado por tu código se reporta en la consola del navegador y no afecta al reproductor, al titular ni a su seguimiento.

Alcanzar la API del reproductor

Resuelve el elemento a partir del 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();
});

Empareja el elemento por el final de su id, no por vid-. El prefijo depende de la incrustación, y una incrustación de test A/B usa otro.

Cambiar de titular

Cambiar de titular ejecuta el código nuevo, pero nada del anterior se deshace. Limpia tus propios temporizadores y listeners si el reproductor puede cambiar de titular dentro de una misma vista.

Dos titulares que comparten el mismo HTML y solo difieren en el código corren sobre el mismo contenido, sin reiniciar. Haz que tu script sea seguro de ejecutar dos veces: comprueba antes de añadir un nodo o registrar un listener.

Si tu sitio usa Content Security Policy

La mayoría no la usa. La tienes si tu página envía una cabecera Content-Security-Policy o lleva una etiqueta <meta http-equiv="Content-Security-Policy">. Si no estás seguro, pregunta a quien mantiene el sitio, o abre la consola del navegador — una política que está bloqueando algo imprime un mensaje con las palabras "Content Security Policy".

Una CSP es una regla que tu sitio envía al navegador diciendo qué scripts pueden correr, para que el código que un atacante consiga colar en la página sea rechazado. El navegador distingue los scripts de confianza por un nonce: una contraseña aleatoria que tu servidor elige en cada carga, pone en la regla y estampa en cada etiqueta de script en la que confía. Cambia en cada carga, así que no se puede copiar.

Para que el código de tu titular corra, esa contraseña tiene que llegarle. Tres cosas lo consiguen.

1. Permite nuestra dirección, para que el reproductor pueda cargar:

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

2. Pon el nonce en la etiqueta del reproductor. La misma contraseña de la regla, y se hace una vez. Si tu sitio ya usa nonce en sus propios scripts, incluye la etiqueta del reproductor con ellos.

index.html

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

3. Usa la incrustación JS. En la incrustación en iframe el reproductor deliberadamente no pasa el nonce, así que el código del titular nunca corre allí bajo una política.

Permitir nuestra dirección pero olvidar el nonce en la etiqueta del reproductor falla en silencio: el reproductor carga, el titular muestra su texto y su estilo, y solo tu código no corre. El navegador registra un mensaje de Content Security Policy en la consola.