snowplow-javascript-tracker/trackers/javascript-tracker/test/pages/youtube/tracking.html at develop · Flip-to/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
62
63
64
<!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>
  <div id="player"></div>
  <script>
    var tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '315',
        width: '560',
        videoId: 'ublEqhffop0',
        playerVars: {
          playsinline: 1,
        },
        events: {
          onReady: initTracking,
        },
      });
    }
  </script>
  <script>
    function initTracking(event) {
      (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('enableYouTubeTracking', {
        id: player,
        options: {
          label: 'test-label',
          captureEvents: ['DefaultEvents'],
        },
      });
    }
  </script>
</body>