Merge pull request #466 from WWWPiramalFinanceCOM/feature/comp-creati…

…on-new branchlocator datalayer added
WWWPiramalFinanceCOM · Sep 19, 2024 · 8c67172 · 8c67172
2 parents e088c4b + ae44a18
commit 8c67172
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 6 deletions.
diff --git a/blocks/branch-detail-description/branch-detail-description.js b/blocks/branch-detail-description/branch-detail-description.js
@@ -1,3 +1,4 @@
+import { intertextLinkingInteraction } from "../../dl.js";
 import { setLocationObj } from "../moredetailsaddress/moredetailsaddress.js";
 
 
@@ -27,7 +28,14 @@ export default function decorate(block) {
 
     let button = block.querySelector(".button-container");
     let description = block.querySelector(".branch-description-content");
-    button.addEventListener("click", () => {
+    button.addEventListener("click", (e) => {
+        try {
+            const dataAnalytics = {}
+            dataAnalytics.click_text = e.target.textContent.trim().toLowerCase()
+            intertextLinkingInteraction(dataAnalytics)
+        } catch (error) {
+            console.warn(error);
+        }
         description.querySelector('.dp-none').classList.remove('dp-none');
         button.classList = 'dp-none';
     });

diff --git a/blocks/branchlocator/branchlocator-biz.js b/blocks/branchlocator/branchlocator-biz.js
@@ -1,5 +1,6 @@
+import { locateMeInteraction, selectBranchInteraction } from "../../dl.js";
 import { loadScript } from "../../scripts/aem.js";
-import { branchURLStr, fetchAPI } from "../../scripts/scripts.js";
+import { branchURLStr, fetchAPI, selectBranchDetails } from "../../scripts/scripts.js";
 import returnLatLan from "../select-tag/getSelectedLanguage.js";
 import { initMap, searchBranchByURL } from "./branchlocator-api.js";
 import { setLocationObj } from "./branchlocator-init.js";
@@ -74,6 +75,7 @@ export async function onloadBranchLocator(block) {
   let multipleBranch = innerBranchFunc(branchhList);
   block.closest('.section').querySelector('.title-to-show').innerText = 'Find all ' + setLocationObj.geoInfo.city+ ' Branches here';
   block.closest('.section').querySelector('.branch-list-wrapper').innerHTML = multipleBranch;
+  selectBranchDetails(block);
   if (setLocationObj.geoInfo.state && !setLocationObj.geoInfo.city) {
     block.closest('.section').querySelector('.city-wrapper').classList.remove('dp-none');
     block.closest('.section').querySelector('.city-wrapper input').focus();
@@ -293,6 +295,11 @@ export function onClickCity(block){
 export function locateMeClick(block){
     let locateMeEvent = block.closest('.section').querySelector('.btn-locate');
     locateMeEvent.addEventListener('click', async function (e){
+    try {
+      locateMeInteraction();
+    } catch (error) {
+      console.warn(error)
+    }
         let {lat, lng} = await returnLatLan();
         setLocationObj.lat = lat;
         setLocationObj.lng = lng;
@@ -322,16 +329,30 @@ export function locateMeClick(block){
         renderCity(block, setLocationObj);
         renderState(block, setLocationObj);  
         let multipleBranch = innerBranchFunc(branchhList);
-        block.closest('.section').querySelector('.branch-list-wrapper').innerHTML = multipleBranch;      
+        block.closest('.section').querySelector('.branch-list-wrapper').innerHTML = multipleBranch;  
+        selectBranchDetails(block);   
         }else{
           block.closest('.section').querySelector('.nearest-txt').innerText = "Kindly enable your Location and Refresh the page";
           this.classList.add('dp-none');
         }
     });
+
+    try {
+    let branchDetailBtn = block.closest('.section').querySelector('.btn-locate-details');
+    branchDetailBtn.addEventListener('click' ,function(e){
+           const dataAnalytics = {}
+           dataAnalytics.cta_position = e.target.closest(".branch-info-container")?.querySelector(".nearest-txt")?.textContent.trim();
+           dataAnalytics.branch_name = e.target.closest(".branch-info-container")?.querySelector(".branch-deatils .branch-addr")?.textContent.trim().split('-')[1].trim();
+           selectBranchInteraction(dataAnalytics);
+        })
+      } catch (error) {
+          console.warn(error)
+      }
 }
 
 function sortByState(data){
   return Object.values(data[setLocationObj.geoInfo.state]);
 }
 
 
+
diff --git a/blocks/imgwithlink/imgwithlink.js b/blocks/imgwithlink/imgwithlink.js
@@ -6,7 +6,7 @@ export default function decorate(block) {
   if (newDiv) {
     block.innerHTML = "";
     block.appendChild(newDiv);
-    if (document.querySelectorAll('.download-piramal-wrapper')) {
+    if (document.querySelectorAll('.download-piramal-wrapper').length > 0) {
       var desktopLinks = document.querySelectorAll('.download-piramal-wrapper .image-href-desktop a');
       var mobileLinks = document.querySelectorAll('.download-piramal-wrapper .image-href-mobile a');
       var anchor_class = desktopLinks.length > 0 ? desktopLinks : mobileLinks;

diff --git a/blocks/nearestlocation/nearestlocation.js b/blocks/nearestlocation/nearestlocation.js
@@ -1,4 +1,4 @@
-import { branchURLStr } from "../../scripts/scripts.js";
+import { branchURLStr, selectBranchDetails } from "../../scripts/scripts.js";
 import { setLocationObj } from "../moredetailsaddress/moredetailsaddress.js";
 
 export function nearestLoction() {
@@ -45,4 +45,5 @@ export default function decorate(block) {
     if(DOMnearestBranch){
         block.innerHTML = DOMnearestBranch;
     }
+    selectBranchDetails(block);
 }
diff --git a/dl.js b/dl.js
@@ -279,4 +279,44 @@ export function documentDownloadInteraction(data) {
     } catch (error) {
         console.warn(error);
     }
+}
+
+export function locateMeInteraction(){
+    try {
+        window.dataLayer.push({
+            'event': 'locate_me',
+            'page_type':targetObject.pageName || "",
+            });
+    } catch (error) {
+        console.warn(error)
+    }
+}
+
+export function selectBranchInteraction(data){
+    try {
+        const {branch_name, cta_position} = data;
+        window.dataLayer.push({
+            'event': 'select_branch',
+            'branch_name': branch_name || "",
+            'cta_position': cta_position || "",
+            'page_type': targetObject.pageName || ""
+            });
+
+    } catch (error) {
+        console.warn(error);
+    }
+}
+
+export function intertextLinkingInteraction(data){
+    try {
+        const {click_text} =data;
+        window.dataLayer.push({
+            'event': 'intertext_linking',
+            'click_text': click_text || "",
+            'page_type': targetObject.pageName || ""
+            });
+
+    } catch (error) {
+        console.warn(error);
+    }
 }
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -2,7 +2,7 @@ import { formOpen, overlay } from "../blocks/applyloanform/applyloanforms.js";
 import { statemasterGetStatesApi } from "../blocks/applyloanform/statemasterapi.js";
 import { validationJSFunc } from "../blocks/applyloanform/validation.js";
 import { toggleAllNavSections } from "../blocks/header/header.js";
-import { applyLoanInteraction } from "../dl.js";
+import { applyLoanInteraction, selectBranchInteraction } from "../dl.js";
 import { sampleRUM, loadHeader, loadFooter, decorateButtons, decorateIcons, decorateSections, decorateBlocks, decorateTemplateAndTheme, waitForLCP, loadBlocks, loadCSS, fetchPlaceholders } from "./aem.js";
 const LCP_BLOCKS = []; // add your LCP blocks to the list
 
@@ -954,4 +954,21 @@ export function branchURLStr(location = "", city = "", state = "", urlstrhand, l
       return `/branch-locator/loans-in-${locationAdd}-${cityStr}-${stateStr}-${locationcode}`;
     }
   }
+}
+
+
+export function selectBranchDetails(block) {
+  let cards = block.closest('.section').querySelectorAll('.branch-list-wrapper a')
+  cards.forEach(function (card) {
+    try {
+      card.addEventListener("click", function (e) {
+        const dataAnalytics = {}
+        dataAnalytics.cta_position = e.target.closest(".cards-branches-container ")?.querySelector(".title h2")?.textContent.trim();
+        dataAnalytics.branch_name = e.target.closest(".card-box")?.querySelector(".card-title")?.textContent.trim().replace(/\s+/g, ' ');
+        selectBranchInteraction(dataAnalytics);
+      })
+    } catch (error) {
+      console.warn(error)
+    }
+  })
 }