Merge pull request #13 from mcclatchy/zone-tracking

pilgreen · web-flow · commit 580a08fea4a8 · 2023-08-31T16:33:20.000-05:00
Zone tracking
diff --git a/config/story.json b/config/story.json
@@ -2,29 +2,6 @@
   "base": ".story-body [id^=zone-el]",
   "ignore": ["zone-el-16"],
   "zones": [
-    {
-      "id": "zone-moneycom",
-      "filters": [
-        {
-          "type": "config",
-          "name": "zone.moneycom",
-          "value": true
-        },
-        {
-          "type": "config",
-          "name": "articleCredit",
-          "pattern": "(Paradise Media|Bankrate)",
-          "value": false
-        }
-      ],
-      "zephr": {
-        "feature": "zone-moneycom"
-      },
-      "placement": {
-        "type": "after",
-        "value": "zone-el-101"
-      }
-    },
     {
       "id": "zone-taboola-recommendations",
       "filters": [
@@ -46,7 +23,8 @@
       "placement": {
         "type": "after",
         "value": "zone-el-101"
-      }
+      },
+      "tracking": true
     },
     {
       "id": "zone-si-tickets",
diff --git a/demo/story/index.html b/demo/story/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en" data-pagetype="story">
   <head>
-    <title>Zones section demo</title>
+    <title>Zones story demo</title>
     <link rel="icon" type="image/x-icon" href="https://www.kansascity.com/favicon.ico">
     
     <meta charset="UTF-8">
@@ -19,24 +19,24 @@
       import distributeZones from "/index.js";
 
       // Mimic the Yozons implementation
-      distributeZones(locker).then(msg => { console.log(msg) });
+      distributeZones(locker);
 
       // Listen for the loaded event
       window.addEventListener("zones-loaded", console.log("zones are loaded"));
 
       // Listen for the intersection event
-      window.addEventListener("zone", (e) => console.log("%s showing", e.detail.id));
+      window.addEventListener("zone", (e) => console.log("zone showing: %s", JSON.stringify(e.detail)));
+
+      // Listen for tracking events
+      window.addEventListener("trackcustomzones", (e) => console.log("zone tracked: %s", JSON.stringify(e.detail)));
 
       // Demo-only show vips
       import { getValidInsertionPoints } from "/lib/zones.js";
-      const vips = getValidInsertionPoints();
-      vips.forEach(ele => ele.classList.add("vip"));
+      getValidInsertionPoints().forEach(ele => ele.classList.add("vip"));
     </script>
   </head>
 
   <body>
-    <!-- <div id="zone-el-1"></div> -->
-    <!-- <div id="zone-el-2"></div> -->
     <div class="card flag"></div>
 
     <article class="paper story-body">
diff --git a/lib/config.js b/lib/config.js
@@ -31,11 +31,11 @@ export function load(url) {
     // Loop through changes
     const zones = data.zones || [];
     zones.forEach(config => {
-      let check = true;
+      let show = true;
 
       // Filter check
       if(config.filters) {
-        check = config.filters.every(f => {
+        show = config.filters.every(f => {
           const { type, name, value, pattern } = f;
 
           switch(type) {
@@ -61,7 +61,7 @@ export function load(url) {
       }
 
       // Render 
-      if(check) {
+      if(show) {
         const zone = new Zone(config.id);
 
         // Zephr connection
@@ -106,6 +106,11 @@ export function load(url) {
           zone.dataset.type = config.type;
         }
 
+        // Add tracking
+        if(config.tracking) {
+          zone.tracking = true;
+        }
+
         // Placement
         if(config.placement) {
           const {type, value} = config.placement;
diff --git a/lib/zones.js b/lib/zones.js
@@ -5,7 +5,8 @@
 // Internals
 let map = new Map();
 let fragment = new DocumentFragment();
-let observer = new IntersectionObserver(handleIntersection, { rootMargin: "500px" })
+let loadObserver = new IntersectionObserver(handleLoad, { rootMargin: "500px" });
+let trackingObserver = new IntersectionObserver(handleTracking, { threshold: 0.25 });
 
 // Locker
 export let locker;
@@ -55,6 +56,18 @@ export class Zone {
     map.set(val, this);
   }
 
+  /*
+   * Getter/Setter for tracking
+   */
+
+  get tracking() {
+    return this.element.dataset.tracking;
+  }
+
+  set tracking(val) {
+    this.element.dataset.tracking = val;
+  }
+
   /*
    * Getters for element attributes
    */
@@ -153,7 +166,12 @@ export class Zone {
       this.log(this.msg || "zone moved into new location");
 
       // Observer for performance team
-      observer.observe(this.element);
+      loadObserver.observe(this.element);
+
+      // Tracking observer
+      if(this.tracking) {
+        trackingObserver.observe(this.element);
+      }
     }
   }
 
@@ -394,24 +412,53 @@ export function render() {
 }
 
 /*
- * IntersectionObserver callback
+ * Intersection callback
  */
 
-function handleIntersection(entries, observer) {
+function handleLoad(entries, observer) {
   entries.forEach((entry) => {
     if(entry.isIntersecting) {
-      // Build the event
-      const loadZone = new CustomEvent("zone", {
+      // Build the load event
+      const intersectionEvent = new CustomEvent("zone", {
         detail: {
           id: entry.target.id
         }
       });
 
       // Send it
-      window.dispatchEvent(loadZone);
+      window.dispatchEvent(intersectionEvent);
+
+      // Only do this once
+      loadObserver.unobserve(entry.target);
+    }
+  });
+}
+
+/*
+ * Tracking callback
+ */
+
+function handleTracking(entries, observer) {
+  entries.forEach((entry) => {
+    if(entry.isIntersecting) {
+      // Build the tracking event if configured (Joe Grubbs spec)
+      const trackEvent = new CustomEvent('trackcustomzones', {
+        detail: {
+          data: [
+            {
+              zone: entry.target.id.replace(/zone-(el-)?/, ''),
+              action: "impression",
+              count: 1
+            }
+          ]
+        }
+      });
+
+      // Send it
+      window.dispatchEvent(trackEvent);
 
-      // Only do it once
-      observer.unobserve(entry.target);
+      // Only do this once
+      trackingObserver.unobserve(entry.target);
     }
   });
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mcclatchy/zones",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "A Yozons extension to dynamically distribute or re-distribute zones on the websites.",
   "main": "index.js",
   "directories": {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@mcclatchy/zones",`
`3`		`- "version": "1.5.3",`
	`3`	`+ "version": "1.6.0",`
`4`	`4`	`"description": "A Yozons extension to dynamically distribute or re-distribute zones on the websites.",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"directories": {`