snowplow-javascript-tracker/trackers/javascript-tracker/test/pages/form-tracking.html at 3.1.0 · hidden-developer/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
<!DOCTYPE html>
<html>
  <head>
    <title>Page for Form Tracking 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 Form Tracking testing with Snowplow Micro</p>
    <div id="init"></div>

    <form id="myForm" class="formy-mcformface" action="/form-tracking.html">
      <fieldset>
        <legend>Personal Info:</legend>
        <label for="fname">First name:</label><br />
        <input type="text" id="fname" name="fname" value="John" class="test" /><br />
        <label for="lname">Last name:</label><br />
        <input type="text" id="lname" name="lname" value="Doe" /><br /><br />
        <input type="radio" id="bike" name="vehicle" value="Bike" />
        <label for="bike"> I have a bike</label><br />
      </fieldset>
      <label for="cars">Choose a car:</label>
      <select id="cars" name="cars">
        <option id="volvo" value="volvo">Volvo</option>
        <option id="saab" value="saab">Saab</option></select
      ><br />
      <label for="message">Enter a message:</label><br />
      <textarea id="message" name="message" rows="10" cols="30">This is a message</textarea><br />
      <input type="checkbox" id="terms" name="terms" value="agree" />
      <label for="terms"> Agree to terms</label><br />
      <input type="submit" value="Submit" id="submit" />
    </form>

    <form id="excludedForm" class="excluded-form" action="/form-tracking.html">
      <label for="excluded-fname">First name:</label><br />
      <input type="text" id="excluded-fname" name="excluded-fname" value="John" class="test" /><br />
      <input type="submit" value="Submit" id="excluded-submit" />
    </form>

    <script>
      var collector_endpoint = document.cookie.split('container=')[1].split(';')[0];
      document.body.className += ' loaded';
    </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: 'autotracking',
      });
      snowplow(function () {
        document.getElementById('init').innerText = 'true';
      });

      function formFilter(formElement) {
        return formElement.id !== 'lname';
      }

      switch (parseQuery().filter) {
        case 'exclude':
          snowplow('enableFormTracking', { options: { fields: { denylist: ['fname'] } } });
          break;
        case 'include':
          snowplow('enableFormTracking', { options: { fields: { allowlist: ['lname'] } } });
          break;
        case 'filter':
          snowplow('enableFormTracking', {
            options: {
              forms: { allowlist: ['formy-mcformface'] },
              fields: { filter: formFilter },
            },
          });
          break;
        case 'excludedForm':
          snowplow('enableFormTracking', { options: { forms: { denylist: ['excluded-form'] } } });
          break;
        default:
          snowplow('enableFormTracking', {
            context: [
              {
                schema: 'iglu:org.schema/WebPage/jsonschema/1-0-0',
                data: {
                  keywords: ['tester'],
                },
              },
            ],
          });
          break;
      }

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