loop54-js-examples/track.html at master · LoopFiftyFour/loop54-js-examples · 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Loop54 Demo: Tracking Events example</title>
  <link rel="icon" href="/favicon.ico?v=1.1">
  <link rel="stylesheet" href="styles/examples.css" />
  <style>
  </style>
</head>
<body>
  <div class="header">
    <a href="index.html"><img src="images/logo.png"></a>
    <h1>Tracking Events example</h1>
  </div>
  <div class="container">
    <div class="info">
      <h2>Info</h2>
      This example shows how to track events for either "Click", "AddToCart" or "Purchase".<br><br>
      It is required to provide <i>EntityType</i> and <i>ExternalId</i> of the product you are tracking, so that we can put everything together correctly.<br><br>
      Dependencies for this example:
      <ul>
        <li>loop54-js-lib.js <br>(<a href="scripts/loop54-js-lib.js">scripts/loop54-js-lib.js</a>)</li>
      </ul>
    </div>
    <h3>1. Add product to track</h3>
    <p>
      <label>EntityType<span class="helpText">(Usually "Product")</span></label>
      <input type="text" id="entityType" placeholder="Product" value="Product">
    </p>
    <p>
      <label>ExternalId<span class="helpText">(The ID that you use to identifiy the item)</span></label>
      <input type="text" id="externalId" placeholder="1234" value="1234">
    </p>
    <h3>2. Set EventType</h3>
    <p>
      <label>Choose an EventType<span class="helpText">(Click/AddToCart/Purchase)</span></label>
      <select id="trackEventType"><option value="Click">Click</option><option value="AddToCart">AddToCart</option><option value="Purchase">Purchase</option></select>
    </p>
    <h3>3. Track the event</h3>
    <p>
      <input type="button" class="button" id="track" onclick="handleClick()" value="Track event" />
    </p>
    <h3>4. Check result</h3>
    <h4>Request Parameters sent to loop54-js-lib</h4>
    <pre id="requestParameters"></pre>
    <h4>Response</h4>
    <pre id="response"></pre>
  </div>
  <h3 id="showCodeHeader" class="showCodeHeader" onClick="showCode()">Show code ▼</h3>
  <div id="showCode" class="showCode">
<div><label>Change to your loop54 endpoint (54proxy address)</label><input type="text" id="configUrl" placeholder="https://helloworld.54proxy.se" value="https://helloworld.54proxy.se" /></div>
<br><br>If you haven't included loop54-js-lib already, include this part and configure it to talk to your loop54 proxy
<pre class="code">
&lt;script type="text/javascript" src="loop54-js-lib.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
  Loop54.setConfig({url: "https://helloworld.54proxy.se"}); // you will get this config from us when we have set up an engine
&lt;/script&gt;
</pre>
Then include the tracking function in a separate javascript file or last in your HTML body tag
<pre class="code">
&lt;script type="text/javascript"&gt;
  function track(entities, eventType) {
    if(typeof(entities) === "string") { entities = JSON.parse(entities); };
    var requestParameters = {
      Events: entities.map(function(entity) {
        return {
          Type: eventType,
          Entity: {
            EntityType: entity.EntityType,
            ExternalId: entity.ExternalId,
          },
        }
      }),
      QuestName: "CreateEvents",
    };

    Loop54.getResponse(requestParameters).then(function(response) {
      // here you can put success messages, it"s not required to do anything after an event is sent.
    });
  };
&lt;/script&gt;
</pre></div>

  <script type="text/javascript" src="scripts/loop54-js-lib.js"></script>
  <script type="text/javascript" src="scripts/syntaxhighlight.js"></script> <!-- import syntaxHighlight() -->
  <script type="text/javascript">
    Loop54.setConfig({url: "https://helloworld.54proxy.se"}); // you will get this config from us when we have set up an engine
    function track(entities, eventType) {
      if(typeof(entities) === "string") { entities = JSON.parse(entities); };
      var requestParameters = {
        Events: entities.map(function(entity) {
          return {
            Type: eventType,
            Entity: {
              EntityType: entity.EntityType,
              ExternalId: entity.ExternalId,
            },
          }
        }),
        QuestName: "CreateEvents",
      };

      var str = JSON.stringify(requestParameters, null, 2); // Not required to keep (for demo purposes)
      document.getElementById("requestParameters").innerHTML = syntaxHighlight(str); // Not required to keep (for demo purposes)

      Loop54.getResponse(requestParameters).then(function(response) {
        // here you can put success messages, it"s not required to do anything after an event is sent.

        /* This part is for demo purposes only, you can remove this part */
        console.log("Response", response); // Not required to keep (for demo purposes)
        var str = JSON.stringify(response, null, 2); // Not required to keep (for demo purposes)
        document.getElementById("response").innerHTML = syntaxHighlight(str); // Not required to keep (for demo purposes)
        /* end */
      });
    };
  </script>
  <script type="text/javascript">
    /*
    * This part is DEMO specific code and not needed in the implementation, please remove this part if you have copied it over
    * to your own code.
    */
    document.getElementById("configUrl").addEventListener("keyup", changeUrl);

    function handleClick() {
      var entity = {};
      entity.EntityType = document.getElementById("entityType").value;
      entity.ExternalId = document.getElementById("externalId").value;
      track([entity], document.getElementById("trackEventType").value);
    }

    function showCode() {
      if(document.getElementById("showCode").style.display === "inline-block") {
        document.getElementById("showCodeHeader").innerText = "Show code ▼";
        document.getElementById("showCode").style.display = "none";
      } else {
        document.getElementById("showCodeHeader").innerText = "Hide code ▲";
        document.getElementById("showCode").style.display = "inline-block";
      }
    };

    function changeUrl(e) {
      if(e.target.id === "configUrl") {var configUrl = e.target.value;};
      var elements = document.getElementsByTagName("pre");
      for(var i = 0; i < elements.length; i++) {
        if(configUrl) {elements[i].innerHTML = elements[i].innerHTML.replace(/url: ".*?"/,"url: \""+configUrl+"\"");};
      };
    }
  </script>
</body>
</html>