@salesforcedevs/docs-components 1.3.13 → 1.3.18

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.13",
+    "version": "1.3.18",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -24,5 +24,5 @@
         "@types/lodash.orderby": "^4.6.7",
         "@types/lodash.uniqby": "^4.7.7"
     },
-    "gitHead": "94b6a0ecb51f4bc853ec3083419de8256db2bd6a"
+    "gitHead": "a45e1a97eefa6646c36a6fa5d24ad6c10a775d04"
 }

package/src/modules/doc/breadcrumbs/breadcrumbs.ts

@@ -17,11 +17,9 @@ const CONSTANTS = {
     dropdownWidth: 32
 };
 
-export const ANALYTICS_EVENT_NAME = "custEv_breadcrumbClick";
+export const ANALYTICS_EVENT_NAME = "custEv_breadcrumbNavClick";
 export const ANALYTICS_BASE_PAYLOAD = {
-    elementType: "breadcrumb",
-    locationOnPage: "breadcrumb",
-    ctaClick: true
+    navType: "breadcrumb"
 };
 
 export default class Breadcrumbs extends LightningElement {
@@ -111,7 +109,7 @@ export default class Breadcrumbs extends LightningElement {
     private get analyticsBasePayload() {
         return {
             ...ANALYTICS_BASE_PAYLOAD,
-            itemTitle: this.breadcrumbs.map((crumb) => crumb.label).join("/")
+            navItem: this.breadcrumbs.map((crumb) => crumb.label).join("/")
         };
     }
 

package/src/modules/doc/contentLayout/contentLayout.html

@@ -6,6 +6,7 @@
                 trees={sidebarContent}
                 value={sidebarValue}
                 header={sidebarHeader}
+                onsidebarclick={onSidebarClick}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar-old>
@@ -20,6 +21,7 @@
                 coveo-public-access-token={coveoPublicAccessToken}
                 coveo-search-hub={coveoSearchHub}
                 coveo-advanced-query-config={coveoAdvancedQueryConfig}
+                onsidebarclick={onSidebarClick}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar>

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -3,6 +3,7 @@ import { closest } from "kagekiri";
 import { toJson } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
 import { SearchSyncer } from "docUtils/SearchSyncer";
+import { track as sendGtm } from "dxUtils/analytics";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
@@ -101,6 +102,12 @@ export default class ContentLayout extends LightningElement {
     private observerTimerId = null;
     private didScrollToSelectedHash = false;
     private _scrollInterval = 0;
+    private scrollPosition = 0;
+
+    private scrolledTwentyFivePercent = false;
+    private scrolledFiftyPercent = false;
+    private scrolledSevenFivePercent = false;
+    private scrolledOneHundredPercent = false;
 
     get showToc(): boolean {
         return this.tocOptions && this.tocOptions.length > 0;
@@ -137,6 +144,11 @@ export default class ContentLayout extends LightningElement {
         this._scrollInterval = window.setInterval(() => {
             this.saveScroll();
         }, 1000);
+
+        document.addEventListener(
+            "scroll",
+            this.scrollThresholdHandler.bind(this)
+        );
     }
 
     renderedCallback(): void {
@@ -165,6 +177,8 @@ export default class ContentLayout extends LightningElement {
         this.clearRenderObserverTimer();
 
         window.clearInterval(this._scrollInterval);
+
+        document.removeEventListener("scroll", this.scrollThresholdHandler);
     }
 
     saveScroll() {
@@ -224,6 +238,48 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
+    onSidebarClick() {
+        this.resetScrollThreshold();
+    }
+
+    sendGtmScrollThresholdEvent(threshold: "25" | "50" | "75" | "100") {
+        sendGtm(document.body, "custEv_scroll", {
+            scrollDepth: threshold
+        });
+    }
+
+    resetScrollThreshold() {
+        this.scrolledTwentyFivePercent = false;
+        this.scrolledFiftyPercent = false;
+        this.scrolledSevenFivePercent = false;
+        this.scrolledOneHundredPercent = false;
+    }
+
+    scrollThresholdHandler() {
+        this.scrollPosition =
+            ((document.documentElement.scrollTop + document.body.scrollTop) /
+                (document.documentElement.scrollHeight -
+                    document.documentElement.clientHeight)) *
+            100;
+
+        if (this.scrollPosition > 25 && !this.scrolledTwentyFivePercent) {
+            this.scrolledTwentyFivePercent = true;
+            this.sendGtmScrollThresholdEvent("25");
+        } else if (this.scrollPosition > 50 && !this.scrolledFiftyPercent) {
+            this.scrolledFiftyPercent = true;
+            this.sendGtmScrollThresholdEvent("50");
+        } else if (this.scrollPosition > 75 && !this.scrolledSevenFivePercent) {
+            this.scrolledSevenFivePercent = true;
+            this.sendGtmScrollThresholdEvent("75");
+        } else if (
+            this.scrollPosition === 100 &&
+            !this.scrolledOneHundredPercent
+        ) {
+            this.scrolledOneHundredPercent = true;
+            this.sendGtmScrollThresholdEvent("100");
+        }
+    }
+
     onSlotChange(event: Event): void {
         const slotElements = (
             event.target as HTMLSlotElement
@@ -235,6 +291,28 @@ export default class ContentLayout extends LightningElement {
                 slotContentElement.ownerDocument?.getElementsByTagName(
                     TOC_HEADER_TAG
                 );
+
+            const docContentEl = slotElements.find(
+                (el) => el.tagName === "DOC-CONTENT"
+            );
+            const topicTitleEl =
+                docContentEl?.shadowRoot?.getElementById("topic-title");
+            const anchorElements =
+                docContentEl?.shadowRoot?.querySelectorAll("a[href]");
+
+            // Attach click listeners to all anchor elements for analytics
+            anchorElements?.forEach((anchorElement) => {
+                anchorElement.addEventListener("click", () => {
+                    sendGtm(anchorElement, "custEv_docContentClick", {
+                        clickText: anchorElement.textContent,
+                        clickUrl: anchorElement.getAttribute("href"),
+                        elementType: "link",
+                        locationOnPage: "docContent",
+                        itemTitle: topicTitleEl?.textContent
+                    });
+                });
+            });
+
             for (const headingElement of headingElements) {
                 // Sometimes elements hash is not being set when slot content is wrapped with div
                 headingElement.hash = headingElement.attributes.hash?.nodeValue;

package/src/modules/doc/header/header.html

@@ -2,6 +2,10 @@
     <dx-brand-theme-provider brand={brand}>
         <header class={className}>
             <dx-skip-nav-link></dx-skip-nav-link>
+            <dx-banner
+                if:true={showBanner}
+                banner-markup={bannerMarkup}
+            ></dx-banner>
             <div class="header_l1">
                 <div if:true={showMenuButton} class="nav_menu-ctas">
                     <dx-button