Switch youtube to iframeAPI

snowplow · Jul 11, 2023 · 665e204 · 665e204
1 parent e1363d2
commit 665e204
Showing 1 changed file with 49 additions and 38 deletions.
diff --git a/trackers/javascript-tracker/test/pages/youtube/tracking.html b/trackers/javascript-tracker/test/pages/youtube/tracking.html
@@ -8,47 +8,58 @@
   </script>
 </head>
 <body>
+  <div id="player"></div>
   <script>
-    (function (p, l, o, w, i, n, g) {
-      if (!p[i]) {
-        p.GlobalSnowplowNamespace = p.GlobalSnowplowNamespace || [];
-        p.GlobalSnowplowNamespace.push(i);
-        p[i] = function () {
-          (p[i].q = p[i].q || []).push(arguments);
-        };
-        p[i].q = p[i].q || [];
-        n = l.createElement(o);
-        g = l.getElementsByTagName(o)[0];
-        n.async = 1;
-        n.src = w;
-        g.parentNode.insertBefore(n, g);
-      }
-    })(window, document, 'script', '../snowplow.js', 'snowplow');
+    var tag = document.createElement('script');
+    tag.src = 'https://www.youtube.com/iframe_api';
+    var firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
-    document.write(collector_endpoint);
+    var player;
+    function onYouTubeIframeAPIReady() {
+      player = new YT.Player('player', {
+        height: '315',
+        width: '560',
+        videoId: 'zSM4ZyVe8xs',
+        playerVars: {
+          playsinline: 1,
+        },
+        events: {
+          onReady: initTracking,
+        },
+      });
+    }
+  </script>
+  <script>
+    function initTracking() {
+      (function (p, l, o, w, i, n, g) {
+        if (!p[i]) {
+          p.GlobalSnowplowNamespace = p.GlobalSnowplowNamespace || [];
+          p.GlobalSnowplowNamespace.push(i);
+          p[i] = function () {
+            (p[i].q = p[i].q || []).push(arguments);
+          };
+          p[i].q = p[i].q || [];
+          n = l.createElement(o);
+          g = l.getElementsByTagName(o)[0];
+          n.async = 1;
+          n.src = w;
+          g.parentNode.insertBefore(n, g);
+        }
+      })(window, document, 'script', '../snowplow.js', 'snowplow');
 
-    window.snowplow('newTracker', 'sp2', collector_endpoint, {
-      appId: 'yt-tracking-' + testIdentifier,
-    });
+      window.snowplow('newTracker', 'sp2', collector_endpoint, {
+        appId: 'yt-tracking-' + testIdentifier,
+      });
 
-    window.snowplow('enableYouTubeTracking', {
-      id: 'youtube',
-      options: {
-        label: 'test-label',
-        captureEvents: ['DefaultEvents'],
-        boundaries: [1],
-      },
-    });
+      window.snowplow('enableYouTubeTracking', {
+        id: 'youtube',
+        options: {
+          label: 'test-label',
+          captureEvents: ['DefaultEvents'],
+          boundaries: [1],
+        },
+      });
+    }
   </script>
-  <iframe
-    id="youtube"
-    width="560"
-    height="315"
-    src="https://www.youtube.com/embed/zSM4ZyVe8xs"
-    title="YouTube video player"
-    rel="0"
-    frameborder="0"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen
-  ></iframe>
 </body>