@salesforcedevs/dx-components 0.16.3 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.16.3",
+    "version": "0.17.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -29,5 +29,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "82ca0f75d4bdd801e08aab4af8ab0f6aec92a6cb"
+    "gitHead": "b7a26c9e46cee9298b3ebc7cbea85930320b83a0"
 }

package/src/modules/dx/dropdown/dropdown.html

@@ -21,6 +21,7 @@
         >
             <template for:each={options} for:item="option">
                 <dx-dropdown-option
+                    analytics-event={analyticsEvent}
                     active={option.active}
                     key-value={option.keyValue}
                     if:false={option.options}
@@ -39,6 +40,7 @@
                     <span class="menu_heading">{option.label}</span>
                     <template for:each={option.options} for:item="suboption">
                         <dx-dropdown-option
+                            analytics-event={analyticsEvent}
                             active={suboption.active}
                             key={suboption.id}
                             key-value={suboption.keyValue}

package/src/modules/dx/dropdown/dropdown.ts

@@ -29,8 +29,10 @@ export default class Dropdown extends LightningElement {
     @api small?: boolean = false;
     @api openOnHover?: boolean = false; // dropdown opens/closes with hover
     @api width?: string | null = null;
-    @api fullWidth?: boolean | null;
-    @api navItemLabel: string | null = null;
+    @api fullWidth?: boolean | null; @api navItemLabel: string | null = null;
+
+    // props forwarded to dropdown option
+    @api analyticsEvent: string | null = null
 
     @api
     get options() {

package/src/modules/dx/footer/footer.ts

@@ -14,6 +14,12 @@ import { track } from "dx/instrumentation";
 const createNewsletterSignupHref = (email: string): string =>
     `/newsletter?subscriberEmail=${email}`;
 
+const ANALYTICS_INFO = {
+    itemTitle: "Newsletter Sign Up Footer",
+    elementType: "button",
+    destinationType: "internal",
+    ctaClick: true
+};
 export default class Footer extends LightningElement {
     @api locale: string | null = null;
     @api
@@ -85,7 +91,13 @@ export default class Footer extends LightningElement {
 
     private onSubmitEmail = async (e: CustomEvent) => {
         const href = createNewsletterSignupHref(e.detail);
-        track(e.currentTarget, "custEv_newsletterSubscriptionStart");
+
+        track(e.currentTarget, "custEv_ctaButtonClick", {
+            ...ANALYTICS_INFO,
+            clickText: e.detail,
+            clickUrl: href,
+        });
+
         window.location.assign(href);
     };
 

package/src/modules/dx/header/__tests__/header.test.ts

@@ -9,23 +9,20 @@ import {
     mockPropsNoNavigation
 } from "./mockProps";
 import { track } from "dx/instrumentation";
+import { ANALYTICS_INFO } from "utils/headerBase";
 
 const TAG = "dx-header";
 const render = createRenderComponent(TAG, Header);
 
 jest.mock("dx/instrumentation");
 
-const GTM_EVENT_NAME = "custEv_signupStart";
-const SIGN_UP_LABEL = "Sign Up";
-
 describe("dx-header", () => {
     it("renders", () => {
         const subtitle = "testsubtitle";
         const element = render({ ...mockPropsDevelopers, subtitle });
         const subtitleEl = element.shadowRoot.querySelector(".subtitle");
-        const buttons: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-            "dx-button"
-        );
+        const buttons: Array<HTMLElement> =
+            element.shadowRoot.querySelectorAll("dx-button");
         const dropdown = element.shadowRoot.querySelector("dx-dropdown");
         const headerEl = element.shadowRoot.querySelector("dx-header-nav");
 
@@ -88,9 +85,8 @@ describe("dx-header", () => {
             ...mockPropsDevelopers,
             versions: JSON.stringify([version])
         });
-        const dropdown: Dropdown = element.shadowRoot.querySelector(
-            "dx-dropdown"
-        );
+        const dropdown: Dropdown =
+            element.shadowRoot.querySelector("dx-dropdown");
         expect(dropdown).not.toBeNull();
         expect(dropdown.options).toHaveLength(1);
 
@@ -180,9 +176,8 @@ describe("dx-header", () => {
             bailLabel: "test",
             signupLink: "/"
         });
-        const buttons: Array<Button> = element.shadowRoot.querySelectorAll(
-            "dx-button"
-        );
+        const buttons: Array<Button> =
+            element.shadowRoot.querySelectorAll("dx-button");
 
         expect(buttons[0].href).toEqual("/");
         expect(buttons[2].href).toEqual("test");
@@ -194,26 +189,25 @@ describe("dx-header", () => {
             subtitle: mockPropsDevelopers.subtitle,
             navItems: mockPropsDevelopers.navItems
         });
-        const headerSearch = element.shadowRoot.querySelector(
-            "dx-header-search"
-        );
+        const headerSearch =
+            element.shadowRoot.querySelector("dx-header-search");
 
         expect(headerSearch).toBeNull();
         return expect(element).toBeAccessible();
     });
 
-    it("signup button track is beign called", () => {
+    it("signup button track is being called", () => {
         const element = render(mockPropsDevelopers);
 
-        const button: HTMLElement = element.shadowRoot.querySelector(
-            "dx-button"
-        );
+        const button: HTMLElement =
+            element.shadowRoot.querySelector("dx-button");
 
         button.click();
 
         expect(track).toBeCalledTimes(1);
-        expect(track).toBeCalledWith(button, GTM_EVENT_NAME, {
-            clickText: SIGN_UP_LABEL
+        expect(track).toBeCalledWith(button, "custEv_signupStart", {
+            ...ANALYTICS_INFO,
+            clickUrl: "/sign-up"
         });
     });
 

package/src/modules/dx/headerNav/headerNav.html

@@ -13,6 +13,7 @@
 
                     <!-- DESKTOP "MORE CONTENT" NAV ITEM -->
                     <dx-dropdown
+                        analytics-event="custEv_topNavLinkClick"
                         if:true={navItem.options}
                         nav-item-label={navItem.label}
                         open-on-hover

package/src/modules/dx/newsletterForm/newsletterForm.ts

@@ -2,6 +2,18 @@ import { LightningElement, api } from "lwc";
 import { track } from "dx/instrumentation";
 import { CountryOptions, CheckboxTextSet } from "typings/custom";
 
+const ANALYTICS_INFO = {
+    itemTitle: "newsletter sign up submit",
+    formName: "newsletter",
+    formType: "newsletter",
+    method: "email",
+    destinationType: "internal",
+    clickText: "Subscribe Now",
+    clickUrl: "/newsletter/success",
+    elementType: "button",
+    ctaClick: true
+};
+
 export default class Form extends LightningElement {
     @api checkboxTextSet: string = "";
     @api countries: string = "";
@@ -134,16 +146,13 @@ export default class Form extends LightningElement {
         submitButtonEl.textContent = "...Processing request";
 
         try {
-            const res = await fetch(
-                "/pages/pardot/footer_optin",
-                {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json"
-                    },
-                    body: JSON.stringify(formData)
-                }
-            );
+            const res = await fetch("/pages/pardot/footer_optin", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(formData)
+            });
 
             if (!res.ok) {
                 throw new Error(errorMsg);
@@ -156,7 +165,7 @@ export default class Form extends LightningElement {
             }
 
             // GTM event
-            track(submitButtonEl, "custEv_newsletterSubscription");
+            track(submitButtonEl, "custEv_formCompletion", ANALYTICS_INFO);
 
             window.location.assign("/newsletter/success");
         } catch (error) {

package/src/modules/utils/headerBase/headerBase.ts

@@ -18,7 +18,14 @@ const VALID_BRANDS = [
     "service",
     "success"
 ];
-const SIGN_UP_LABEL = "Sign Up";
+
+export const ANALYTICS_INFO = {
+    clickText: "Sign Up",
+    itemTitle: "Sign Up Header Button",
+    elementType: "button",
+    destinationType: "internal",
+    ctaClick: true
+};
 
 export abstract class HeaderBase extends LightningElement {
     @api bailHref?: string | null = null;
@@ -185,7 +192,8 @@ export abstract class HeaderBase extends LightningElement {
 
     private handleSignUpClick(e: PointerEvent) {
         track(e.currentTarget!, "custEv_signupStart", {
-            clickText: SIGN_UP_LABEL
+            ...ANALYTICS_INFO,
+            clickUrl: this.signupLink,
         });
     }