Parámetros de conversión en URLs

Un visitante que ve el vídeo y luego compra lo hace en otra página — un checkout, un formulario, una página de gracias. Nada en esa segunda página sabe qué pasó en el reproductor, a menos que lleves la información contigo. Estas tres piezas de la API existen para eso.

conversionKey

La propiedad que identifica la vista actual: la sesión, el reproductor y la variante, cuánto se ha visto y qué variantes de función estaban activas. Es el valor que el resto de esta página mueve.

urlUpdater

Recibe una URL y la devuelve con los parámetros de conversión y seguimiento añadidos. Úsalo cuando tu página arma el enlace de destino:

const player = document.querySelector("vturb-smartplayer");

player.addEventListener("player:ready", () => {
  const url = player.urlUpdater("https://example.com/checkout");

  // https://example.com/checkout?<conversion and tracking params>
  console.log(url);
});

injectUrlUpdater

Registra una función que reescribe cada URL a la que apunta el reproductor — botones de llamada a la acción, anclas, imágenes. Úsalo cuando los enlaces viven dentro del reproductor y no en tu marcado:

const player = document.querySelector("vturb-smartplayer");

player.addEventListener("player:ready", () => {
  player.injectUrlUpdater((url, element) => {
    const next = new URL(url, window.location.href);

    next.searchParams.set("utm_source", "player");

    return next.toString();
  });
});

La función recibe la URL original y, cuando existe, el elemento al que pertenece, así que puedes tratar un CTA de forma distinta a una imagen.

Cómo elegir entre los dos

Usa urlUpdater cuando el enlace es de tu código, e injectUrlUpdater cuando es del reproductor. No son alternativas entre sí, sino dos mitades del mismo trabajo — las páginas con un CTA propio y llamadas a la acción del reproductor suelen necesitar ambas.