track-element-views/example-events.html at master · beaulm/track-element-views · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Track Element Views Example</title>
  </head>
  <body>
    <!-- The following image will be tracked using fishermen-in-inle-lake as the label -->
    <img data-trackname="fishermen-in-inle-lake" height="687" src="http://c414769.r69.cf1.rackcdn.com/three-inle-fishermen-rowing-with-their-legs.JPG" width="960" />

    <!-- The following image will be tracked using http://c414769.r69.cf1.rackcdn.com/fishing-nets-off-fort-kochi.JPG as the label -->
    <img height="687" src="http://c414769.r69.cf1.rackcdn.com/fishing-nets-off-fort-kochi.JPG" width="960" />

    <!-- The following image will be tracked using guy-and-cow as the label -->
    <img id="guy-and-cow" height="687" src="http://c414769.r69.cf1.rackcdn.com/guy-and-cow-sunbathing.JPG" width="960" />

    <!-- The following image will be tracked using Tana Toraja Cave Burial as the label -->
    <img alt="Tana Toraja Cave Burial" height="687" src="http://c414769.r69.cf1.rackcdn.com/tana-toraja-cave-burial-up-close.JPG" width="960" />

    <img height="687" src="http://c414769.r69.cf1.rackcdn.com/stunning-view-of-bangkok-from-the-very-top-of-the-top-of-an-abandon-skyscraper.JPG" width="960" />
    <img height="687" src="http://c414769.r69.cf1.rackcdn.com/cool-insect-in-gunung-palung.JPG" width="960" />

    <!-- It's recommended to include the trackviews function at the bottom of your page -->
    <script type="text/javascript" src="./trackviews.min.js"></script>

    <!-- This is the custom piece which tells the function to track all images on the page, as long as they've been at least 90% on screen for a second -->
    <script type="text/javascript">
      //Add an event listener on the window for individual element views
      window.addEventListener('individualView', function(event){
        //See all the data passed back in the event
        console.log(event.detail);
        //Track an event in Mixpanel
        mixpanel.track('individualView', event.detail);
      }, false);

      //totalViews & viewedFor are dispatched as the page is closing, so do what you gotta do quickly
      window.addEventListener('totalViews', function(event){
        //Track an Omniture/SiteCatalyst/Adobe Analytics event
        s.linkTrackVars = 'prop1';
        s.linkTrackEvents = 'None';
        s[prop] = JSON.stringify(event.detail);
        s.tl(true, 'o', 'totalViews');
      }, false);

      //jQuery example
      $(window).on('viewedFor', function(event){
        //Push something to Google Tag Manager
        window.dataLayer.push({
          event: 'viewedFor',
          meta: {'Element', action: event.detail.action, label: event.detail.label}
        });
      });

      trackViews(1000, 50, 'img');
    </script>
  </body>
</html>