@salesforcedevs/docs-components 1.3.52 → 1.3.54-alpha-1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.52",
+    "version": "1.3.54-alpha-1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/amfReference/amfReference.html

@@ -22,7 +22,6 @@
         <div slot="sidebar-header" class="version-picker">
             <template if:true={isVersionEnabled}>
                 <dx-dropdown
-                    suppress-gtm-nav-headings
                     onchange={handleVersionChange}
                     data-type="version"
                     options={versions}

package/src/modules/doc/breadcrumbItem/breadcrumbItem.ts

@@ -1,6 +1,6 @@
 import { track } from "dxUtils/analytics";
 import { LightningElement, api } from "lwc";
-import { AnalyticsPayload, BreadcrumbItemVariant } from "typings/custom";
+import { BreadcrumbItemVariant } from "typings/custom";
 
 const BREADCRUMB_LONG = "breadcrumb_long";
 const BREADCRUMB_BACK_ARROW = "breadcrumb_back-arrow";
@@ -8,8 +8,7 @@ const BREADCRUMB_BACK_ARROW = "breadcrumb_back-arrow";
 const LONG_LABEL_NUMBER = 30;
 export default class BreadcrumbItem extends LightningElement {
     @api href?: string;
-    @api analyticsEvent!: string;
-    @api analyticsBasePayload!: AnalyticsPayload;
+    @api level?: string;
 
     @api
     get label() {
@@ -51,14 +50,21 @@ export default class BreadcrumbItem extends LightningElement {
     }
 
     private onLinkClick(event: Event): void {
-        if (!this.analyticsEvent) {
-            return;
-        }
+        track(event.target!, "custEv_breadcrumbClick", {
+            click_text: this.label,
+            click_url: this.href,
+            element_type: "link",
+            nav_type: "breadcrumb",
+            nav_level: this.level ? this.level + 1 : 1,
+            nav_item: this.label
+        });
 
-        track(event.target!, this.analyticsEvent, {
-            ...this.analyticsBasePayload,
-            clickText: this.label,
-            clickUrl: this.href
+        track(event.target!, "custEv_linkClick", {
+            click_text: this.label,
+            click_url: this.href,
+            element_title: "a",
+            element_type: "link",
+            content_category: "cta"
         });
     }
 }

package/src/modules/doc/breadcrumbs/breadcrumbs.html

@@ -3,21 +3,18 @@
         <template if:true={displayCrumbs}>
             <template if:false={renderSmallVariant}>
                 <doc-breadcrumb-item
-                    analytics-event={analyticsEventName}
-                    analytics-base-payload={analyticsBasePayload}
                     href={firstCrumb.href}
                     label={firstCrumb.label}
                 ></doc-breadcrumb-item>
                 <span class="breadcrumb-item_slash">/</span>
                 <template if:true={renderDropdown}>
                     <dx-dropdown
+                        analytics-event="custEv_breadcrumbClick"
+                        analytics-payload={ANALYTICS_PAYLOAD}
                         if:true={renderDropdown}
-                        analytics-event={analyticsEventName}
-                        analytics-base-payload={analyticsBasePayload}
                         options={dropdownOptions}
                         open-on-hover
                         placement="bottom"
-                        suppress-gtm-nav-headings
                         variant="indented"
                         width="fit-content"
                     >
@@ -32,11 +29,10 @@
                 </template>
                 <template for:each={breadcrumbItems} for:item="breadcrumb">
                     <doc-breadcrumb-item
-                        analytics-event={analyticsEventName}
-                        analytics-base-payload={analyticsBasePayload}
                         href={breadcrumb.href}
                         key={breadcrumb.id}
                         label={breadcrumb.label}
+                        level={breadcrumb.level}
                     ></doc-breadcrumb-item>
                     <span class="breadcrumb-item_slash" key={breadcrumb.label}>
                         /
@@ -48,8 +44,6 @@
             </template>
             <template if:true={renderSmallVariant}>
                 <doc-breadcrumb-item
-                    analytics-event={analyticsEventName}
-                    analytics-base-payload={analyticsBasePayload}
                     href={lastLinkCrump.href}
                     label={lastLinkCrump.label}
                     variant="back-arrow"

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

@@ -17,11 +17,6 @@ const CONSTANTS = {
     dropdownWidth: 32
 };
 
-export const ANALYTICS_EVENT_NAME = "custEv_breadcrumbNavClick";
-export const ANALYTICS_BASE_PAYLOAD = {
-    navType: "breadcrumb"
-};
-
 export default class Breadcrumbs extends LightningElement {
     @api ariaLabel: string = "Documentation Breadcrumbs";
 
@@ -102,14 +97,12 @@ export default class Breadcrumbs extends LightningElement {
         return this.breadcrumbs[this.breadcrumbs.length - 1];
     }
 
-    private get analyticsEventName() {
-        return ANALYTICS_EVENT_NAME;
-    }
-
-    private get analyticsBasePayload() {
+    // this payload is only used for breadcrumb dropdown
+    private get ANALYTICS_PAYLOAD() {
         return {
-            ...ANALYTICS_BASE_PAYLOAD,
-            navItem: this.breadcrumbs.map((crumb) => crumb.label).join("/")
+            element_type: "link",
+            nav_type: "breadcrumb",
+            nav_level: 1
         };
     }
 
@@ -137,10 +130,13 @@ export default class Breadcrumbs extends LightningElement {
             return;
         }
 
-        this._breadcrumbs = toJson(breadcrumbs).map((crumb: Breadcrumb) => ({
-            ...crumb,
-            id: crumb.id || crumb.href
-        }));
+        this._breadcrumbs = toJson(breadcrumbs).map(
+            (crumb: Breadcrumb, index: number) => ({
+                ...crumb,
+                id: crumb.id || crumb.href,
+                level: index
+            })
+        );
     }
 
     private updateDropdownOptionAmount(): void {

package/src/modules/doc/content/content.css

@@ -6,7 +6,6 @@
 
 @import "dxHelpers/text";
 @import "dxHelpers/reset";
-@import "dxHelpers/card";
 @import "dxHelpers/table";
 
 .doc-content {

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

@@ -144,7 +144,7 @@ export default class ContentLayout extends LightningElement {
             this.searchSyncer.init();
         }
 
-        document.addEventListener(
+        document.body.addEventListener(
             "scroll",
             this.scrollThresholdHandler.bind(this)
         );
@@ -248,9 +248,8 @@ export default class ContentLayout extends LightningElement {
 
     scrollThresholdHandler() {
         this.scrollPosition =
-            ((document.documentElement.scrollTop + document.body.scrollTop) /
-                (document.documentElement.scrollHeight -
-                    document.documentElement.clientHeight)) *
+            (document.body.scrollTop /
+                (document.body.scrollHeight - window.innerHeight)) *
             100;
 
         if (this.scrollPosition > 25 && !this.scrolledTwentyFivePercent) {

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

@@ -147,6 +147,7 @@
                         aria-label={bailLabel}
                         class="header_bail-link"
                         href={bailHref}
+                        onclick={handleBailClick}
                         variant="tertiary"
                         icon-symbol="new_window"
                         target="_blank"

package/src/modules/doc/header/header.ts

@@ -4,6 +4,7 @@ import type { OptionWithNested, OptionWithLink } from "typings/custom";
 import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson } from "dxUtils/normalizers";
 import get from "lodash.get";
+import { track } from "dxUtils/analytics";
 
 const TABLET_MATCH = "980px";
 const MOBILE_MATCH = "880px";
@@ -143,4 +144,27 @@ export default class Header extends HeaderBase {
         this._language = detail;
         this.dispatchEvent(new CustomEvent("langchange", { detail }));
     }
+
+    private handleBailClick(event: Event) {
+        const payload = {
+            click_text: "pdf",
+            click_url: this.bailHref,
+            element_title: "dx-button",
+            element_type: "link",
+            content_category: "download"
+        };
+        track(event.target!, "custEv_pdfDownload", {
+            ...payload,
+            file_name: this.getFilename(this.bailHref!),
+            file_extension: "pdf"
+        });
+
+        track(event.target!, "custEv_linkClick", {
+            ...payload
+        });
+    }
+
+    private getFilename = function (path: string) {
+        return path.substring(path.lastIndexOf("/") + 1);
+    };
 }

package/src/modules/doc/xmlContent/xmlContent.html

@@ -14,8 +14,8 @@
         <div slot="sidebar-header" class="document-pickers">
             <dx-dropdown
                 data-type="version"
-                suppress-gtm-nav-headings
-                analytics-event={analyticsEvent}
+                analytics-event="custEv_ctaLinkClick"
+                analytics-payload={ANALYTICS_PAYLOAD}
                 options={versionOptions}
                 value={version.id}
                 width="290px"

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -63,7 +63,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     private sidebarContent: Array<TreeNode> = null;
     private version: DocVersion = null;
     private docTitle = "";
-    private analyticsEvent = "custEv_ctaLinkClick";
     private _pathName = "";
     private _pageHeader?: Header;
     private listenerAttached = false;
@@ -281,6 +280,13 @@ export default class DocXmlContent extends LightningElementWithState<{
         );
     }
 
+    private get ANALYTICS_PAYLOAD() {
+        return {
+            element_title: "version picker",
+            content_category: "cta"
+        };
+    }
+
     private handlePopState = (): void =>
         this.updatePageReference(this.getReferenceFromUrl());