From b6b942c7901e66799c7433ade82c64b2d1334ba9 Mon Sep 17 00:00:00 2001
From: Zach Lasiuk <zaclas01@Mac.attlocal.net>
Date: Fri, 24 Jan 2025 15:39:34 -0600
Subject: [PATCH] adding analytics to share & CTAs on next steps

---
 .../partials/learning-paths/next-steps.html   | 22 +++---
 .../static/js/anonymous-analytics.js          | 67 ++++++++++++++-----
 2 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/learning-paths/next-steps.html b/themes/arm-design-system-hugo-theme/layouts/partials/learning-paths/next-steps.html
index 5c821e9ceb..c3b1263278 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/learning-paths/next-steps.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/learning-paths/next-steps.html
@@ -55,36 +55,36 @@
         <h2>Share</h2>
         <p>Share what you've learned.</p>
         <div class="social-sharing">
-            <div class="social-icons">
-                <a id="linkedin-link"
+            <div id="social-share-icon-div" class="social-icons">
+                <a id="linkedin-link" class="share-button" name="LinkedIn"
                 title="Share via LinkedIn">
                     <svg class="share-icon">
                         <use xlink:href="/img/social-share/all-square-social-icons.svg#icon-linkedin"></use>
                     </svg>
                 </a>
 
-                <a id="twitter-link" 
+                <a id="twitter-link" class="share-button" name="Twitter"
                 title="Share via X">
                     <svg class="share-icon">
                         <use xlink:href="/img/social-share/all-square-social-icons.svg#icon-twitter"></use>
                     </svg>
                 </a>
       
-                <a id="bluesky-link"
+                <a id="bluesky-link" class="share-button" name="Bluesky"
                 title="Share via Bluesky">
                     <svg class="share-icon">
                         <use xlink:href="/img/social-share/all-square-social-icons.svg#icon-bluesky"></use>
                     </svg>
                 </a>
                 
-                <a id="facebook-link"
+                <a id="facebook-link" class="share-button" name="Facebook"
                 title="Share via Facebook">
                     <svg class="share-icon">
                         <use xlink:href="/img/social-share/all-square-social-icons.svg#icon-facebook"></use>
                     </svg>
                 </a>
             
-                <a id="email-link"
+                <a id="email-link" class="share-button" name="Email"
                 title="Share via email">
                     <svg class="share-icon">
                         <use xlink:href="/img/social-share/all-square-social-icons.svg#icon-mail"></use>
@@ -92,7 +92,7 @@ <h2>Share</h2>
                 </a>
 
 
-                <a id="copy-link"
+                <a id="copy-link" class="share-button" name="Copied"
                 title="Copy link to Learning Path">
                     <svg class="share-icon">
                         <use xlink:href="/img/social-share/all-square-social-icons.svg#icon-link"></use>
@@ -244,7 +244,7 @@ <h4>Read related resources</h4>
             <div id="arm-dev-program-div" class="content-box">
                 <h4>Talk with Arm Experts</h4>
                 <p>Join the Arm Developer Program to share ideas, ask questions, and explore solutions with the support of the developer community.</p>
-                <ads-cta-button id="join-dev-program" level="primary" sr-label="primary button">Join now</ads-cta-button>    
+                <ads-cta-button id="join-dev-program" level="primary" sr-label="primary button" class="next-step-cta" name="DevProgram">Join now</ads-cta-button>    
                 <script>
                     document.getElementById("join-dev-program").onclick = function () {
                     window.open("https://www.arm.com/resources/developer-program?#register","_blank");
@@ -253,7 +253,7 @@ <h4>Talk with Arm Experts</h4>
             </div>
 
 
-            <div id="explore-tags-div" class="content-box">
+            <div id="event-div" class="content-box">
                 {{ $csv := resources.Get "events.csv" }}
                 {{ $csv_content := $csv | transform.Unmarshal (dict "delimiter" ",") }}
 
@@ -308,7 +308,7 @@ <h4>Attend {{index $event 0}}</h4>
                     <p class="next-steps-subtitle">{{ $formatted_dates }}</p>
                     
                     <p>{{index $event 7}}</p>
-                    <ads-cta-button id="event-cta" level="secondary">Event sign up</ads-cta-button>
+                    <ads-cta-button id="event-cta" level="secondary" class="next-step-cta" name="Event" data-event-name="{{index $event 0}}">Event sign up</ads-cta-button>
                     <script>
                         document.getElementById("event-cta").onclick = function () {
                         window.open("{{index $event 8}}","_blank");
@@ -319,7 +319,7 @@ <h4>Attend {{index $event 0}}</h4>
                     <h4>Learn more on Arm Developer</h4>
 
                     <p>Visit Developer.arm.com to continue your learning journey.</p>
-                    <ads-cta-button id="dev-cta" level="secondary">Developer.arm.com</ads-cta-button>
+                    <ads-cta-button id="dev-cta" level="secondary" class="next-step-cta" name="Developer.arm.com">Developer.arm.com</ads-cta-button>
                     <script>
                         document.getElementById("dev-cta").onclick = function () {
                         window.open("https://developer.arm.com","_blank");
diff --git a/themes/arm-design-system-hugo-theme/static/js/anonymous-analytics.js b/themes/arm-design-system-hugo-theme/static/js/anonymous-analytics.js
index ea713e467d..3ddefefe71 100644
--- a/themes/arm-design-system-hugo-theme/static/js/anonymous-analytics.js
+++ b/themes/arm-design-system-hugo-theme/static/js/anonymous-analytics.js
@@ -279,10 +279,11 @@ function attachPageFindSearchTracker() {
         else if ( ( (depth_of_path == 4) | (depth_of_path == 5) ) & (current_path.includes('/learning-paths/')) ) {
             /* Assign to the following components:
                     0. Onload detection
-                    1. Tags (only for intro and next step pages)
-                    2. Review ('check answer' button)
-                    2.5. Review (if all correct, add trigger for analytics somehow)
-                    3. Feedback (on Next Steps page)
+                    1. Tags (on Intro page)
+                    2. Feedback (on Next Steps page)
+                    3. Share (on Next Steps page)
+                    4. CTAs (on Next Steps page)
+                    5. Further Reading links (on Next Steps page)
             */
             
                     
@@ -351,7 +352,9 @@ function attachPageFindSearchTracker() {
                 });
             }
 
+            // REMOVED NOW THAT REVIEW PAGE IS REMOVED. SAFE TO TAKE OUT.
             // 2) Review check answer btn and answers
+            /*
             let check_answer_btn = document.getElementById('check-answer-btn'); 
             if (check_answer_btn) {
                 // check answer button
@@ -389,9 +392,10 @@ function attachPageFindSearchTracker() {
                     });
                 });
             } 
+            */
 
 
-            // 3) Feedback on Next Steps page
+            // 2) Feedback on Next Steps page
             // trackStarRating
             let stars = document.querySelectorAll('input[name=rating]');
             for (let star of stars) {
@@ -407,7 +411,47 @@ function attachPageFindSearchTracker() {
                     trackChoiceFeedback(feedback);
                 });
             } 
+
+            // 3) Share         on Next Steps page
+            let share_a = document.getElementsByClassName('share-button');
+            for (let share_link of share_a) {
+                share_link.addEventListener("click", () => {
+                    _satellite.track('content-interaction', {   
+                        'data-track-type'     : 'learning-path-next-steps',
+                        'data-track-location' : 'share',
+                        'data-track-name'     : share_link.getAttribute('name')     // will be 'LinkedIn' or 'Facebook' or 'Email' or similar.
+                    });
+                });
+            }
+
+            // 4) CTAs             on Next Steps page
+            let cta_links = document.querySelectorAll('.next-step-cta');
+            for (let cta of cta_links) {
+                console.log('ctalink',cta);
+                cta.addEventListener("click", () => {                   
+                    _satellite.track('content-interaction', {   
+                        'data-track-type'     : 'learning-path-next-steps',
+                        'data-track-location' : cta.getAttribute('name'),               // either 'Event', 'DevProg', or 'Developer.arm.com'
+                        'data-track-name'     : cta.getAttribute('data-event-name')     // if Event, gives event name, otherwise, null.
+                    }); 
+                })
+            }
+
+            // 5) Further Reading links on Next Steps page  
+            let further_reading_links = document.querySelectorAll('#further-reading-div a');
+            for (let link of further_reading_links) {
+                link.addEventListener("click", () => {
+                    _satellite.track('content-interaction', {   
+                        'data-track-type'     : 'learning-path-next-steps',
+                        'data-track-location' : 'metadata',
+                        'data-track-name'     : 'further-reading-link'
+                    });
+                });
+            }
+
+
                 // metadata marking for similar learning paths, further reading, next learning path.
+            /* All obsolete in new design
             let next_learning_path_link = document.getElementById('next-learning-path');
             if (next_learning_path_link) {
                 next_learning_path_link.addEventListener("click", () => {
@@ -419,7 +463,6 @@ function attachPageFindSearchTracker() {
                 });
             }
 
-
             let similar_lp_links = document.querySelectorAll('#similar-lp-div a');
             for (let link of similar_lp_links) {
                 link.addEventListener("click", () => {
@@ -430,16 +473,7 @@ function attachPageFindSearchTracker() {
                     });
                 });
             }
-            let further_reading_links = document.querySelectorAll('#further-reading-div a');
-            for (let link of further_reading_links) {
-                link.addEventListener("click", () => {
-                    _satellite.track('content-interaction', {   
-                        'data-track-type'     : 'learning-path-next-steps',
-                        'data-track-location' : 'metadata',
-                        'data-track-name'     : 'further-reading-link'
-                    });
-                });
-            }
+
             let explore_tag_links = document.querySelectorAll('#explore-tags-div ads-tag');
             for (let link of explore_tag_links) {
                 link.addEventListener("click", () => {
@@ -450,6 +484,7 @@ function attachPageFindSearchTracker() {
                     });
                 });
             }
+            */
 
 
             // 4a) Navitaion from navbar