snowplow-javascript-tracker/trackers/javascript-tracker/test/pages/youtube/tracking-player.html at request-compression-example · jethron/snowplow-javascript-tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<head>
  <title>Page for YouTube tracking testing with Snowplow Micro</title>
  <script>
    var collector_endpoint = document.cookie.split('container=')[1].split(';')[0].trim();
    var testIdentifier = document.cookie.split('testIdentifier=')[1].split(';')[0].trim();
    document.body.className += ' loaded';
  </script>
</head>
<body>
  <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');

    document.write(collector_endpoint);

    window.snowplow('newTracker', 'sp2', collector_endpoint, {
      appId: 'yt-player-' + testIdentifier,
    });
  </script>
  <div id="youtube"></div>
  <script>
    // Load the IFrame Player API
    var tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // `onYouTubeIframeAPIReady` will run once the API is loaded
    function onYouTubeIframeAPIReady() {
      new YT.Player('youtube', {
        videoId: 'ublEqhffop0',
        events: {
          onReady: (e) =>
            window.snowplow('enableYouTubeTracking', {
              // `e.target` is the instance of `YT.Player`
              id: e.target,
              options: {
                label: 'test-label',
                captureEvents: ['DefaultEvents'],
                boundaries: [1],
              },
            }),
        },
      });
    }
  </script>
</body>