@salesforcedevs/docs-components 1.3.15 → 1.3.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.15",
+    "version": "1.3.19",
     "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": "4f666690d99a33edd60c92c55d84732b7feadb07"
+    "gitHead": "bbeea73fe1ce336f60e304b3edcc0ff7afd5b99d"
 }

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>
@@ -35,7 +37,9 @@
                     <div style={docContentStyle}>
                         <slot onslotchange={onSlotChange}></slot>
                     </div>
-                    <doc-sprig-survey></doc-sprig-survey>
+                    <doc-sprig-survey
+                        if:true={shouldDisplayFeedback}
+                    ></doc-sprig-survey>
                 </div>
                 <div class="right-nav-bar is-sticky">
                     <dx-toc

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

@@ -3,9 +3,12 @@ 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 } };
 
+declare const Sprig: (eventType: string, eventNme: string) => void;
+
 const TOC_HEADER_TAG = "DOC-HEADING";
 const HIGHLIGHTABLE_SELECTOR = [
     "p",
@@ -79,6 +82,11 @@ export default class ContentLayout extends LightningElement {
     private lastScrollPosition: number;
     private observer?: IntersectionObserver;
     private hasRendered: boolean = false;
+    private contentLoaded: boolean = false;
+
+    get shouldDisplayFeedback() {
+        return this.contentLoaded && typeof Sprig !== "undefined";
+    }
 
     private searchSyncer = new SearchSyncer({
         callbacks: {
@@ -101,6 +109,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 +151,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 +184,8 @@ export default class ContentLayout extends LightningElement {
         this.clearRenderObserverTimer();
 
         window.clearInterval(this._scrollInterval);
+
+        document.removeEventListener("scroll", this.scrollThresholdHandler);
     }
 
     saveScroll() {
@@ -224,17 +245,82 @@ 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
         ).assignedElements();
 
         if (slotElements.length) {
+            this.contentLoaded = true;
             const slotContentElement = slotElements[0];
             const headingElements =
                 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;