Best Practices
      Back to home
      1. Success center
      2. Best Practices

      Track Youtube videos as events

      By adding a TrenDemon pixel to a video player, you will be able to track visitors who viewed the video and see what goals they subsequently completed.

      Use Case: Let’s say that you run a video on your home page and the goal you are tracking is “requesting a demo”. You can track the video on the home page and see in your TrenDemon report how many visitors who viewed the video also requested a demo after doing so.

      In the following post, you will find a tutorial on how to add TrenDemon’s pixel to a YouTube video.

      Note: In order to track a YouTube video that is played on your website, you should also use the YouTube Player API.

      Here are the steps:

      1) When you embed a YouTube video as an <iframe> element, make sure that either the player’s src URL includes the enable jsapi parameter = 1 or the <iframe> element’s enablejsapi attribute is set to “true”. Example:

      <iframe id="iframe-example" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"></iframe>

      2) Each YouTube video <iframe> element should have a specific ID.

      Example:

      <iframe id="iframe-example" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"></iframe>

      3) Load the YouTube Player API so that you can track the number of clicks on “play”. Add this code to the <body> of the page:

      <script>
      // Inject YouTube API script
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;

      function onYouTubePlayerAPIReady() {
      // create the global player from the specific iframe (#video)
       player = new YT.Player('IFRAME_ID', {
       events: {
       // call this function when player changes the state
       'onStateChange': onPlayerStateChange
       }
       });
      }

      function onPlayerStateChange(event) {
       if(event.data ==1){
       //fire pixel
       var img = new Image(1,1);
       img.src = 'https://prod.trendemon.com/apis/loadflame/pixel?user_id=USER_ID&conv_id=GOAL_ID';
       }
      }
      </script>

      Note: make sure that the img.src is the pixel for the event you created.

      Here is the reference to the YouTube documentation.

       

      For any questions or issues, please contact our support team.