analytics/apps/html/conversion-tracking.html at 5dac70bc54e8fd33c1e6cd9f7522619af5997fdb · dubinc/analytics · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Your website description" />
    <title>Client Conversion Tracking</title>
  </head>
  <body>
    <script>
      !(function (w, da) {
        w[da] =
          w[da] ||
          function () {
            (w[da].q = w[da].q || []).push(arguments);
          };

        ['trackClick', 'trackLead', 'trackSale'].forEach(function (m) {
          w[da][m] = function () {
            w[da](m, ...arguments);
          };
        });
      })(window, 'dubAnalytics');
    </script>

    <script>
      // Add a 3-second delay before loading the script to test queue functionality
      setTimeout(() => {
        const script = document.createElement('script');
        script.defer = true;
        script.src = './analytics/script.conversion-tracking.js';
        script.setAttribute('data-api-host', 'http://api.localhost:8888');
        script.setAttribute(
          'data-publishable-key',
          'dub_pk_BgyBCEJCPCGN3RN7oieLVHRs',
        );
        document.head.appendChild(script);
      }, 3000);
    </script>

    <header>
      <h1>Client Conversion Tracking</h1>
      <button
        onclick="dubAnalytics.trackLead({
          eventName: 'Account created',
          customerExternalId: '1234567890',
          customerName: 'John Doe',
          customerEmail: 'john.doe@example.com',
        })"
      >
        Track Lead
      </button>

      <button
        onclick="dubAnalytics.trackSale({
          eventName: 'Purchase completed',
          customerExternalId: 'CXvG5QOLi8QKBA2jYmDh',
          invoiceId: Math.random().toString(36).substring(2, 15),
          amount: 5000, // defaults to usd cents, use `currency` prop to specify a different currency
        })"
      >
        Track Sale
      </button>
    </header>
  </body>
</html>