Merge pull request #214 from Shopify/amg/analytics

Amg/analytics
Shopify · Jun 12, 2024 · b7d5255 · b7d5255
2 parents d9f6cca + 3578c14
commit b7d5255
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 26 deletions.
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -1,4 +1,7 @@
-exclude: [node_modules, README.md]
+exclude:
+  - node_modules,
+    README.md,
+    .jekyll-cache
 incremental: true
 collections:
   releases:

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -5,6 +5,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ page.title }}</title>
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/styles.css">
+    {% if jekyll.environment == "production" %}
+      <script async src="https://www.googletagmanager.com/gtag/js?id=G-0SJLBWD2TH"></script>
+      <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-0SJLBWD2TH', { 'app_name': 'product-taxonomy' });
+      </script>
+    {% endif %}
+    {% if jekyll.environment == "development" %}
+      <script>
+        // Mock & silence gtag function in development environment
+        function gtag() {}
+      </script>
+    {% endif %}
   </head>
 
   <body>

diff --git a/docs/_layouts/release.html b/docs/_layouts/release.html
@@ -70,7 +70,7 @@ <h3>Breadcrumb</h3>
       <h3>Category attributes</h3>
       {% for attribute in site.data[page.target].attributes %}
         <div class="value-container attribute-values hidden" id="{{ attribute.id }}">
-          <h4 class="value-title" tabindex="0">
+          <h4 class="value-title attribute-title" tabindex="0">
             <div class="value-title__text">
               {{ attribute.name }}
             </div>
@@ -106,7 +106,7 @@ <h2>Category mappings</h2>
         {% assign output_title = output_title_and_version[0] %}
         {% assign output_version = output_title_and_version[1] %}
         {% assign rules = mapping.rules %}
-        <h3 class="value-title value-title--box" tabindex="0">
+        <h3 class="value-title value-title--box mapping-title" tabindex="0">
           {{ output_title }}
           <span class="chevron"></span>
         </h3>

diff --git a/docs/assets/js/nodes.js b/docs/assets/js/nodes.js
@@ -15,6 +15,20 @@ let cachedElements = {
   attributeValuesElement: undefined,
 };
 
+const yieldToMain = () => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, 0);
+  });
+};
+
+const executeTasksWithYieldToMain = async (tasks) => {
+  while (tasks.length > 0) {
+    const task = tasks.shift();
+    task();
+    await yieldToMain();
+  }
+};
+
 const readMappingElements = () => {
   if (cachedElements.mappingElements) {
     return cachedElements.mappingElements;
@@ -139,11 +153,40 @@ const toggleMappedCategories = () => {
   });
 };
 
-const toggleAttributeSelected = (event) => {
-  const attributeElement = event.currentTarget.parentNode;
-  attributeElement.classList.toggle('selected');
+const toggleAttributeSelectedClass = (event) => {
+  const element = event.target.closest('.attribute-values');
+  element.classList.toggle('selected');
 };
 
+const toggleMappingSelectedClass = (event) => {
+  const element = event.target.parentNode;
+  element.classList.toggle('selected');
+};
+
+const sendMappingTitleClickAnalytics = () =>
+  window.gtag('event', 'app_click', {
+    event_action: 'toggle_mapping_visibility',
+  });
+
+const sendAttributeTitleClickAnalytics = () =>
+  window.gtag('event', 'app_click', {
+    event_action: 'toggle_attribute_visibility',
+  });
+
+const valueTitleClickWithYieldToMain =
+  (toggleSelectClassFunc, sendAnalyticsFunc) => (event) => {
+    const tasks = [() => toggleSelectClassFunc(event), sendAnalyticsFunc];
+    executeTasksWithYieldToMain(tasks);
+  };
+
+const valueTitleClickWithScheduler =
+  (toggleSelectClassFunc, sendAnalyticsFunc) => (event) => {
+    scheduler.postTask(() => toggleSelectClassFunc(event), {
+      priority: 'user-blocking',
+    });
+    scheduler.postTask(sendAnalyticsFunc, {priority: 'background'});
+  };
+
 const setNodeQueryParam = (nodeId) => {
   const url = new URL(window.location);
   if (nodeId != null) {
@@ -154,13 +197,7 @@ const setNodeQueryParam = (nodeId) => {
   window.history.pushState({}, '', url);
 };
 
-function yieldToMain() {
-  return new Promise((resolve) => {
-    setTimeout(resolve, 0);
-  });
-}
-
-const renderWithYieldToMain = async () => {
+const renderWithYieldToMain = () => {
   const tasks = [
     toggleSelectedCategory,
     toggleExpandedCategories,
@@ -169,11 +206,7 @@ const renderWithYieldToMain = async () => {
     toggleMappedCategories,
   ];
 
-  while (tasks.length > 0) {
-    const task = tasks.shift();
-    task();
-    await yieldToMain();
-  }
+  executeTasksWithYieldToMain(tasks);
 };
 
 const renderWithScheduler = () => {
@@ -184,16 +217,38 @@ const renderWithScheduler = () => {
   scheduler.postTask(toggleMappedCategories);
 };
 
-let renderPageFunc = (() => {
+let scheduleRenderPage = undefined;
+let scheduleMappingTitleClick = undefined;
+let scheduleAttributeTitleClick = undefined;
+
+const initSchedulerFunctions = () => {
   if ('scheduler' in window) {
-    return renderWithScheduler;
+    scheduleRenderPage = renderWithScheduler;
+    scheduleMappingTitleClick = valueTitleClickWithScheduler(
+      toggleMappingSelectedClass,
+      sendMappingTitleClickAnalytics,
+    );
+    scheduleAttributeTitleClick = valueTitleClickWithScheduler(
+      toggleAttributeSelectedClass,
+      sendAttributeTitleClickAnalytics,
+    );
+    return;
   } else {
-    return renderWithYieldToMain;
+    scheduleRenderPage = renderWithYieldToMain;
+    scheduleMappingTitleClick = valueTitleClickWithYieldToMain(
+      toggleMappingSelectedClass,
+      sendMappingTitleClickAnalytics,
+    );
+    scheduleAttributeTitleClick = valueTitleClickWithYieldToMain(
+      toggleAttributeSelectedClass,
+      sendAttributeTitleClickAnalytics,
+    );
+    return;
   }
-})();
+};
 
 const renderPage = () => {
-  renderPageFunc();
+  scheduleRenderPage();
 };
 
 const toggleNode = (nodeId, depth) => {
@@ -225,7 +280,8 @@ const addOnClick = (target, handler) => {
 
 const setupListeners = () => {
   const categoryNodeElements = readCategoryNodeElements();
-  const attributeTitleElements = qq('.value-title');
+  const attributeTitleElements = qq('.attribute-title');
+  const mappingTitleElements = qq('.mapping-title');
 
   categoryNodeElements.forEach((element) => {
     addOnClick(element, () =>
@@ -236,8 +292,12 @@ const setupListeners = () => {
     );
   });
 
-  attributeTitleElements.forEach((attribute) =>
-    addOnClick(attribute, toggleAttributeSelected),
+  attributeTitleElements.forEach((element) =>
+    addOnClick(element, scheduleAttributeTitleClick),
+  );
+
+  mappingTitleElements.forEach((element) =>
+    addOnClick(element, scheduleMappingTitleClick),
   );
 };
 
@@ -276,6 +336,7 @@ export const resetToCategory = (categoryId) => {
 };
 
 export const setupNodes = () => {
+  initSchedulerFunctions();
   setInitialNode();
   setupListeners();
   renderPage();