snowplow-javascript-tracker/trackers/javascript-tracker/test/pages/button-click-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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
  <head>
    <title>Page for Link Click testing with Snowplow Micro</title>

    <script>
      function parseQuery() {
        var query = {};
        var pairs = window.location.search.substring(1).split('&');
        for (var i = 0; i < pairs.length; i++) {
          var pair = pairs[i].split('=');
          query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
        }
        return query;
      }
    </script>
  </head>
  <body>
    <p id="title">Page for Button Click testing with Snowplow Micro</p>
    <div id="init"></div>
    <button>TestMinimalButton</button>
    <button id="button1">TestButton</button>
    <button id="button2" class="test-class">TestButtonWithClass</button>
    <button id="button3" class="test-class test-class2">TestButtonWithClasses</button>
    <button id="button4" name="testName">TestWithName</button>

    <!-- Test to ensure the `data-sp-button-label` attribute takes precedence -->
    <button id="button5" data-sp-button-label="DataLabel">ButtonLabel</button>

    <!-- Test to ensure input buttons work -->
    <input id="button6" type="button" value="TestInputButton" />

    <!-- A button that adds a new button dynamically -->
    <button id="addDynamic" onclick="addDynamicButton()">AddButton</button>

    <!-- Ensure button tracked when children are clicked -->
    <button><span id="button-child">TestChildren</span></button>

    <!-- Ensure button tracked when exists in ShadowDOM -->
    <script>
      window.customElements.define(
        'shadow-btn',
        class extends HTMLElement {
          connectedCallback() {
            const b = document.createElement('button');
            b.type = 'button';
            b.textContent = 'Shadow';

            const shadowRoot = this.attachShadow({ mode: 'open' });
            shadowRoot.appendChild(b);
          }
        }
      );
    </script>

    <shadow-btn id="shadow"></shadow-btn>

    <!-- Enable/disable testing -->
    <button id="disable" onclick="snowplow('disableButtonClickTracking')">Disable</button>
    <button id="disabled-click">DisabledClick</button>

    <button id="enable" onclick="snowplow('enableButtonClickTracking')">Enable</button>
    <button id="enabled-click">EnabledClick</button>

    <!-- Ensuring the final config is used after multiple calls to `enableButtonClickTracking` -->
    <button id="set-multiple-configs" onClick="setMultipleConfigs">Set Multiple Configs</button>
    <button id="final-config" class="final-config">Final Config</button>

    <script>
      function setMultipleConfigs() {
        enableButtonClickTracking({ denylist: ['final-config'] });
        enableButtonClickTracking();
      }
    </script>

    <script>
      var collector_endpoint = document.cookie.split('container=')[1].split(';')[0];
      var testIdentifier = document.cookie.split('testIdentifier=')[1].split(';')[0].trim();
      document.body.className += ' loaded';
    </script>

    <script>
      function addDynamicButton() {
        // Add a new dynamic button
        const newButton = document.createElement('button');
        newButton.id = 'button7';
        newButton.innerText = 'TestDynamicButton-' + parseQuery().eventMethod;
        document.body.appendChild(newButton);
      }
    </script>

    <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);

      snowplow('newTracker', 'sp', collector_endpoint, {
        appId: 'button-click-tracking-' + testIdentifier,
        method: parseQuery().eventMethod,
      });
      snowplow(function () {
        document.getElementById('init').innerText = 'true';
      });

      snowplow('enableButtonClickTracking');
    </script>
  </body>
</html>