URL conversion params

A viewer who watches the video and then buys does so on another page — a checkout, a form, a thank-you page. Nothing in that second page knows what happened in the player unless you carry it across. These three pieces of API exist to do that.

conversionKey

The property that identifies the current view: the session, the player and variant, how much has been watched, and which feature variants were active. It is the value the rest of this page moves around.

urlUpdater

Takes one URL and returns it with the conversion and tracking parameters appended. Use it when your page builds a destination link itself:

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

Registers a function that rewrites every URL the player links to — call-to-action buttons, anchors, images. Use it when the links live inside the player rather than in your markup:

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

The function receives the original URL and, where there is one, the element it belongs to, so you can treat a CTA differently from an image.

Choosing between them

Reach for urlUpdater when your code owns the link, and injectUrlUpdater when the player does. They are not alternatives to each other so much as two halves of the same job, and pages with both a custom CTA and player call-to-actions usually need both.