Web-Based CTV

<!-- start Permutive -->
<script>
  !function(e,o,n,i){if(!e){e=e||{},window.permutive=e,e.q=[];var t=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,function(e){return(e^(window.crypto||window.msCrypto).getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)})};e.config=i||{},e.config.apiKey=o,e.config.workspaceId=n,e.config.environment=e.config.environment||"production",(window.crypto||window.msCrypto)&&(e.config.viewId=t());for(var g=["addon","identify","track","trigger","query","segment","segments","ready","on","once","user","consent"],r=0;r<g.length;r++){var w=g[r];e[w]=function(o){return function(){var n=Array.prototype.slice.call(arguments,0);e.q.push({functionName:o,arguments:n})}}(w)}}}(window.permutive,"<WORKSPACE_API_KEY>","<WORKSPACE_ID>",{});
  window.googletag=window.googletag||{},window.googletag.cmd=window.googletag.cmd||[],window.googletag.cmd.push(function(){if(0===window.googletag.pubads().getTargeting("permutive").length){var e=window.localStorage.getItem("_pdfps");window.googletag.pubads().setTargeting("permutive",e?JSON.parse(e):[]);var o=window.localStorage.getItem("permutive-id");o&&(window.googletag.pubads().setTargeting("puid",o),window.googletag.pubads().setTargeting("ptime",Date.now().toString())),window.permutive.config.viewId&&window.googletag.pubads().setTargeting("prmtvvid",window.permutive.config.viewId),window.permutive.config.workspaceId&&window.googletag.pubads().setTargeting("prmtvwid",window.permutive.config.workspaceId)}});
</script>
<script async src="https://<ORGANIZATION_ID>.edge.permutive.app/<WORKSPACE_ID>-<CTV_PLATFORM>.js"></script>
<!-- end Permutive -->

<access origin="https://<ORGANIZATION_ID>.edge.permutive.app" subdomains="true"/>
<access origin="https://api.permutive.com" subdomains="true"/>
<access origin="https://api.permutive.app" subdomains="true"/>

permutive.identify([{
  id: "<TIFA_ID>",
  tag: "tifa"
}])

<script async src="https://<ORGANIZATION_ID>.edge.permutive.app/<WORKSPACE_ID>-lg-webos-24.js"></script>

<script async src="https://<ORGANIZATION_ID>.edge.permutive.app/<WORKSPACE_ID>-hbbtv.js"></script>

const props = {
  videoProperties: {
    title: "Episode Title",
    genre: ["Drama", "Thriller"],
    audio_language: "en"
  },
  duration: 3600000 // Duration in milliseconds (1 hour)
}

// Tracks Videoview event
permutive.addon("ctv", props)

// Initialize CTV addon with video metadata
permutive.addon("ctv", {
  duration: 3600000, // 1 hour in milliseconds
  videoProperties: {
    title: "Breaking Bad",
    genre: ["Drama", "Crime"],
    season_number: 1,
    episode_number: 1,
    audio_language: "en",
    runtime: 3600
  }
})

// Get video element reference
const videoElement = document.querySelector("video")

// Track play events
videoElement.addEventListener("play", function() {
  permutive.addons.ctv.play(videoElement.currentTime * 1000)
})

// Track pause events
videoElement.addEventListener("pause", function() {
  permutive.addons.ctv.pause(videoElement.currentTime * 1000)
})

// Track ad breaks
const onAdStart = () => {
  videoElement.pause()
  permutive.addons.ctv.track("VideoAdView", {
    ad_id: "ad_12345",
    ad_position: "midroll"
  })
}

const onAdComplete = () => {
  permutive.addons.ctv.track("VideoAdCompletion", {
    ad_id: "ad_12345"
  })
}

// Track video completion
const onVideoEnd = () => {
  permutive.addons.ctv.stop(videoElement.currentTime * 1000)
}

// Track ad view
permutive.addons.ctv.track("VideoAdView", {
  ad_id: "creative_123",
  ad_duration: 30,
  ad_position: "preroll"
})

// Track ad completion
permutive.addons.ctv.track("VideoAdCompletion", {
  ad_id: "creative_123"
})