sfc-utils 1.4.168 → 1.4.170

package/accountswap.js

@@ -10,17 +10,19 @@ const pollForAccount = async function (i, isNav) {
   // Start the iterator
   if (!i) {
     i = 0;
-  }
-  // Add a click event to signin
-  if (isNav) {
-    const signinButton = document.querySelector(".hnp-signin");
-    if (signinButton) {
-      // Add event listener to signin button
-      signinButton.onclick = function (e) {
-        treg.realm.core.login();
-        e.preventDefault();
-        e.stopPropagation();
-      };
+    // Add a click event to signin
+    if (isNav) {
+      const signinButton = document.querySelector(".hnp-signin");
+      if (signinButton) {
+        console.log("Found signin button");
+        // Add event listener to signin button
+        signinButton.onclick = function (e) {
+          console.log("Clicked signin button");
+          window.treg.realm.core.login();
+          e.preventDefault();
+          e.stopPropagation();
+        };
+      }
     }
   }
   // Safecheck for treg since it might not be global yet

package/components/geocoder.mjs

@@ -1,4 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
+import { trackEvent } from "./helpers/utilfunctions.mjs";
 import * as geocoderStyles from "../styles/modules/geocoder.module.less";
 
 // This is a singleton event listener that we can use to add/remove event listeners
@@ -23,9 +24,9 @@ const Geocoder = ({
   filterRegion, // You need to test results, but could also pass in a neighbourhood, district, city, county, state or administrative area
   market, // Will filter by the market's state if no filterRegion provided
   resultFunc,
-  // buttonTrackingId,  // To be used for analytics once system is more finalized
   placeholder,
   inputValueOverride, // Used to clear/change the input value from the parent component
+  buttonTrackingId = "SelectAnAddress", // A string sent as part of the onClick tracking event - can be used as an 'id' of sorts (e.g. "ScriptTool")
 }) => {
   // Show a loader when we're requesting
   const [loading, setLoading] = useState(false);
@@ -148,6 +149,7 @@ const Geocoder = ({
                 if (resultFunc) {
                   resultFunc(selectedLocation);
                 }
+                trackEvent("Click", "Dropdown", "Geocoder", buttonTrackingId);
               }
               // Hide the list now
               setLocData(null);
@@ -227,6 +229,7 @@ const Geocoder = ({
                   if (resultFunc) {
                     resultFunc(locData[i]);
                   }
+                  trackEvent("Click", "Dropdown", "Geocoder", buttonTrackingId);
                 }}
               >
                 <button

package/components/helpers/utilfunctions.mjs

@@ -202,12 +202,11 @@ function trackEvent(
   elementContent = null,
   elementText = null
 ) {
+  // all of these variables are used regardless of if it's an embed
   const storySettings = getSettings();
   const systemSettingsObj = systemSettings[0];
   const elementVariant = `${systemSettingsObj.Repo}|${systemSettingsObj.Project_Type}`;
   const linkUrl = `${storySettings.PROJECT.SUBFOLDER}/${storySettings.PROJECT.SLUG}`;
-  const urlHash = window.HDN.dataLayer.visit.urlHash;
-
   let event;
   if (eventType === "Click") {
     event = "hnp_click";
@@ -215,70 +214,47 @@ function trackEvent(
     event = "hnp_impression";
   }
 
-  window.dataLayer.push({
-    event: event, //REQUIRED; Fixed value
-    element_name: elementName, //REQUIRED; One of a list of tags/types of elements on the page (e.g. Button, Map, Tooltip, ToggleButton, Dropdown). TO DO: create a consistent list of this
-    element_content: elementContent, //REQUIRED; One of a list of subtypes of element types (e.g. Button) on the page (e.g. Geocoder, Searchbar, Prev/Next). TO DO: create a consistent list of this, maybe
-    element_variant: elementVariant, //REQUIRED; Template type (e.g. custom-repo-name|gatsby) (top-list|plat)
-    element_text: elementText, //REQUIRED; What was the actual text or alt-text of the thing that was clicked (InnerHTML or id specific to that element)
-    component_type: null, //OPTIONAL; If BC components uses Storybook components: Organism or molecule from storybook (whatever the highest level component from storybook that the clicked on item belongs to)
-    component_subtype: null, //OPTIONAL; If BC components uses Storybook components: Variant of the component_type from storybook
-    component_detail: null, //OPTIONAL; If BC components uses Storybook components: WCM TITLE|Position|Atom from storybook. This pipe-delimited structure is required. When values are not available for a given position, leave the position blank so the order of information doesn't change. e.g. something|| or something||something_else
-    zone: null, // OPTIONAL; For WCM components. The WCM zone the component was displayed in.
-    link_url: linkUrl, //REQUIRED; What is the slug of the project?
-    url_hash: urlHash, // REQUIRED;
-    outbound: false, //REQUIRED; Boolean indicating whether the link that was clicked took the user to a different domain.
-    source_system: "devhub", //REQUIRED; What platform powered the element? One of cookie, blueconic, realm, castle, devhub, treg, legacy obits, sailthru, casper, wordpress, hnp-jwplayer, event_data_service (other options required discussion with BI/DE)
-  });
-}
-
-const trackEmbedEvent = (
-  eventType,
-  elementName = null,
-  elementContent = null,
-  elementText = null
-) => {
-  const storySettings = getSettings();
-  const systemSettingsObj = systemSettings[0];
-  const elementVariant = `${systemSettingsObj.Repo}|${systemSettingsObj.Project_Type}`;
-  const linkUrl = `${storySettings.Year}/${storySettings.Slug}`;
-
-  let event;
-  if (eventType === "Click") {
-    event = "hnp_click";
-  } else if (eventType === "Impression") {
-    event = "hnp_impression";
-  }
+  if (window.dataLayer) {
+    // this is NOT an embed, so push to the dataLayer
+    const urlHash = window.HDN.dataLayer.visit.urlHash;
 
-  var embed_event = {
-    event: event, //REQUIRED; Fixed value
-    element_name: elementName, //REQUIRED; One of a list of tags/types of elements on the page (e.g. Button, Map, Tooltip, ToggleButton, Dropdown). TO DO: create a consistent list of this
-    element_content: elementContent, //REQUIRED; One of a list of subtypes of element types (e.g. Button) on the page (e.g. Geocoder, Searchbar, Prev/Next). TO DO: create a consistent list of this, maybe
-    element_variant: elementVariant, //REQUIRED; Template type (e.g. custom-repo-name|gatsby) (top-list|plat)
-    element_text: elementText, //REQUIRED; What was the actual text or alt-text of the thing that was clicked (InnerHTML or id specific to that element)
-    component_type: null, //OPTIONAL; If BC components uses Storybook components: Organism or molecule from storybook (whatever the highest level component from storybook that the clicked on item belongs to)
-    component_subtype: null, //OPTIONAL; If BC components uses Storybook components: Variant of the component_type from storybook
-    component_detail: null, //OPTIONAL; If BC components uses Storybook components: WCM TITLE|Position|Atom from storybook. This pipe-delimited structure is required. When values are not available for a given position, leave the position blank so the order of information doesn't change. e.g. something|| or something||something_else
-    zone: null, // OPTIONAL; For WCM components. The WCM zone the component was displayed in.
-    link_url: linkUrl, //REQUIRED; What is the slug of the project?
-    outbound: false, //REQUIRED; Boolean indicating whether the link that was clicked took the user to a different domain.
-    source_system: "devhub", //REQUIRED; What platform powered the element? One of cookie, blueconic, realm, castle, devhub, treg, legacy obits, sailthru, casper, wordpress, hnp-jwplayer, event_data_service (other options required discussion with BI/DE)
-    iframe_event: true,
-  };
+    window.dataLayer.push({
+      event: event, //REQUIRED; Fixed value
+      element_name: elementName, //REQUIRED; One of a list of tags/types of elements on the page (e.g. Button, Map, Tooltip, ToggleButton, Dropdown). TO DO: create a consistent list of this
+      element_content: elementContent, //REQUIRED; One of a list of subtypes of element types (e.g. Button) on the page (e.g. Geocoder, Searchbar, Prev/Next). TO DO: create a consistent list of this, maybe
+      element_variant: elementVariant, //REQUIRED; Template type (e.g. custom-repo-name|gatsby) (top-list|plat)
+      element_text: elementText, //REQUIRED; What was the actual text or alt-text of the thing that was clicked (InnerHTML or id specific to that element)
+      component_type: null, //OPTIONAL; If BC components uses Storybook components: Organism or molecule from storybook (whatever the highest level component from storybook that the clicked on item belongs to)
+      component_subtype: null, //OPTIONAL; If BC components uses Storybook components: Variant of the component_type from storybook
+      component_detail: null, //OPTIONAL; If BC components uses Storybook components: WCM TITLE|Position|Atom from storybook. This pipe-delimited structure is required. When values are not available for a given position, leave the position blank so the order of information doesn't change. e.g. something|| or something||something_else
+      zone: null, // OPTIONAL; For WCM components. The WCM zone the component was displayed in.
+      link_url: linkUrl, //REQUIRED; What is the slug of the project?
+      url_hash: urlHash, // REQUIRED;
+      outbound: false, //REQUIRED; Boolean indicating whether the link that was clicked took the user to a different domain.
+      source_system: "devhub", //REQUIRED; What platform powered the element? One of cookie, blueconic, realm, castle, devhub, treg, legacy obits, sailthru, casper, wordpress, hnp-jwplayer, event_data_service (other options required discussion with BI/DE)
+    });
+  } else {
+    // this IS an embed, so use this special logic
+    var embed_event = {
+      event: event, //REQUIRED; Fixed value
+      element_name: elementName, //REQUIRED; One of a list of tags/types of elements on the page (e.g. Button, Map, Tooltip, ToggleButton, Dropdown). TO DO: create a consistent list of this
+      element_content: elementContent, //REQUIRED; One of a list of subtypes of element types (e.g. Button) on the page (e.g. Geocoder, Searchbar, Prev/Next). TO DO: create a consistent list of this, maybe
+      element_variant: elementVariant, //REQUIRED; Template type (e.g. custom-repo-name|gatsby) (top-list|plat)
+      element_text: elementText, //REQUIRED; What was the actual text or alt-text of the thing that was clicked (InnerHTML or id specific to that element)
+      component_type: null, //OPTIONAL; If BC components uses Storybook components: Organism or molecule from storybook (whatever the highest level component from storybook that the clicked on item belongs to)
+      component_subtype: null, //OPTIONAL; If BC components uses Storybook components: Variant of the component_type from storybook
+      component_detail: null, //OPTIONAL; If BC components uses Storybook components: WCM TITLE|Position|Atom from storybook. This pipe-delimited structure is required. When values are not available for a given position, leave the position blank so the order of information doesn't change. e.g. something|| or something||something_else
+      zone: null, // OPTIONAL; For WCM components. The WCM zone the component was displayed in.
+      link_url: linkUrl, //REQUIRED; What is the slug of the project?
+      outbound: false, //REQUIRED; Boolean indicating whether the link that was clicked took the user to a different domain.
+      source_system: "devhub", //REQUIRED; What platform powered the element? One of cookie, blueconic, realm, castle, devhub, treg, legacy obits, sailthru, casper, wordpress, hnp-jwplayer, event_data_service (other options required discussion with BI/DE)
+      iframe_event: true,
+    };
 
-  if (typeof window !== "undefined") {
-    window.parent.postMessage(embed_event, "*"); // Sends event to parent page
+    if (typeof window !== "undefined") {
+      window.parent.postMessage(embed_event, "*"); // Sends event to parent page
+    }
   }
+}
 
-  //TO TEST: I think this needs to go directly into the iframe embed code?
-  //window.addEventListener("message", (message) => {if (message.data.iframe_event) {var event = message.data;dataLayer.push(event);}});
-};
-
-export {
-  debounce,
-  appendLayoutScripts,
-  formatHDN,
-  getFigureWidth,
-  trackEvent,
-  trackEmbedEvent,
-};
+export { debounce, appendLayoutScripts, formatHDN, getFigureWidth, trackEvent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.4.168",
+  "version": "1.4.170",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",