Wire up Google Analytics + FB Pixel event tracking

brsoff · brsoff · commit b49d2e801792 · 2019-03-07T14:16:16.000-05:00
This sets up initial tracking for clicks on:
- Quick Start Module Local Install
- Quick Start Module Cloud Partners
- Get Started CTA buttons
- Ecosystem Project cards
- Resource Project cards
- Global nav menu

Note the Jekyll environment must be 'production' for events to register.
diff --git a/_includes/footer_scripts.html b/_includes/footer_scripts.html
@@ -32,3 +32,8 @@
     });
   }
 </script>
+
+{% if jekyll.environment == 'production' %}
+  <script src="{{ site.baseurl }}/assets/track-events.js"></script>
+  <script>trackEvents.bind();</script>
+{% endif %}
diff --git a/assets/quick-start-module.js b/assets/quick-start-module.js
@@ -41,10 +41,13 @@ ptbuild.on("click", function() {
   selectedOption(ptbuild, this, "ptbuild")
 });
 
-// Force a selection onclick to get the right operating system selected from
-// the start
+// Pre-select user's operating system
 $(document).ready(function() {
-    document.getElementById(opts.os).click();
+  var userOsOption = document.getElementById(opts.os);
+
+  if (userOsOption) {
+    selectedOption(os, userOsOption, "os");
+  }
 });
 
 
diff --git a/assets/track-events.js b/assets/track-events.js
@@ -0,0 +1,83 @@
+var trackEvents = {
+  recordClick: function(eventCategory, eventLabel) {
+    if (typeof ga == "function") {
+      ga('send', 'event', {
+        eventCategory: eventCategory,
+        eventAction: "click",
+        eventLabel: eventLabel
+      });
+    }
+
+    if (typeof fbq === "function") {
+      fbq("trackCustom", eventCategory, {
+        target: eventLabel
+      });
+    }
+  },
+
+  bind: function() {
+    // Clicks on the main menu
+    $(".main-menu ul li a").on("click", function() {
+      trackEvents.recordClick("Global Nav", $(this).text());
+      return true;
+    });
+
+    // Clicks on Resource cards
+    $(".resource-card a").on("click", function() {
+      trackEvents.recordClick("Resource Card", $(this).find("h4").text());
+      return true;
+    });
+
+    // Clicks on Ecosystem Project cards
+    $(".ecosystem-card a").on("click", function() {
+      trackEvents.recordClick("Ecosystem Project Card", $(this).find("h4").text());
+      return true;
+    });
+
+    // Clicks on 'Get Started' call to action buttons
+    $("[data-cta='get-started']").on("click", function() {
+      trackEvents.recordClick("Get Started CTA", $(this).text());
+      return true;
+    });
+
+    // Clicks on Cloud Platforms in Quick Start Module
+    $(".cloud-option").on("click", function() {
+      var platformName = $.trim($(this).find(".cloud-option-body").text());
+      trackEvents.recordClick("Quick Start Module - Cloud Platforms", platformName);
+    });
+
+    // Clicks on Cloud Platform Services in Quick Start Module
+    $(".cloud-option ul li a").on("click", function() {
+      var platformName = $.trim(
+        $(this).
+        closest("[data-toggle='cloud-dropdown']").
+        find(".cloud-option-body").
+        text()
+      );
+
+      var serviceName = $.trim($(this).text());
+
+      trackEvents.recordClick(
+        "Quick Start Module - Cloud Platforms",
+        platformName + " - " + serviceName
+      );
+
+      return true;
+    });
+
+    // Clicks on options in Quick Start - Locally
+    $(".quick-start-module .row .option").on("click", function() {
+      var selectedOption = $.trim($(this).text());
+      var rowIndex = $(this).closest(".row").index();
+      var selectedCategory = $(".quick-start-module .headings .title-block").
+                              eq(rowIndex).
+                              find(".option-text").
+                              text();
+
+      trackEvents.recordClick(
+        "Quick Start Module - Local Install",
+        selectedCategory + ": " + selectedOption
+      )
+    })
+  }
+};
diff --git a/features.html b/features.html
@@ -16,7 +16,7 @@ <h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;End-to-end
         <p class="lead">PyTorch enables fast, flexible experimentation and efficient production through a hybrid front-end, distributed training, and ecosystem of tools and libraries.
         </p>
 
-        <a href="{{ site.baseurl }}/get-started" class="btn btn-lg with-right-arrow btn-white">
+        <a href="{{ site.baseurl }}/get-started" class="btn btn-lg with-right-arrow btn-white" data-cta="get-started">
             Get Started
         </a>
     </div>
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@ <h1>From<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Research To<br />Product
 
     <p class="lead">An open source deep learning platform that provides a seamless path from research prototyping to production deployment.</p>
 
-    <a href="{{ site.baseurl }}/get-started" class="btn btn-lg with-right-arrow">
+    <a href="{{ site.baseurl }}/get-started" class="btn btn-lg with-right-arrow" data-cta="get-started">
       Get Started
     </a>
   </div>

Original file line number	Diff line number	Diff line change
`@@ -32,3 +32,8 @@`
`32`	`32`	`});`
`33`	`33`	`}`
`34`	`34`	`</script>`
	`35`	`+`
	`36`	`+{% if jekyll.environment == 'production' %}`
	`37`	`+ <script src="{{ site.baseurl }}/assets/track-events.js"></script>`
	`38`	`+ <script>trackEvents.bind();</script>`
	`39`	`+{% endif %}`