From dc2ad9345cf6ac966ca9e4c86e33f60f43d59bd2 Mon Sep 17 00:00:00 2001 From: Zach Lasiuk Date: Wed, 15 Feb 2023 14:55:32 -0600 Subject: [PATCH] Template: Added initial button click tracking functionality; modified how links appear if linking externally --- static/js/anonymous-analytics.js | 147 ++++++++++++++++++ .../filter-learning-paths.js | 2 +- .../layouts/_default/_markup/render-link.html | 8 + .../layouts/index.html | 4 +- .../partials/footer/javascript-functions.html | 4 + .../layouts/partials/header/global-nav.html | 2 +- 6 files changed, 163 insertions(+), 4 deletions(-) create mode 100644 static/js/anonymous-analytics.js create mode 100644 themes/arm-design-system-hugo-theme/layouts/_default/_markup/render-link.html diff --git a/static/js/anonymous-analytics.js b/static/js/anonymous-analytics.js new file mode 100644 index 0000000000..19d963d3a4 --- /dev/null +++ b/static/js/anonymous-analytics.js @@ -0,0 +1,147 @@ + +/* These analytics are implemented to track 100% anonymous clicks, and will be used for improving the product ONLY.*/ +/* + + What is tracked: + + - content-interaction + Attributes tracked: + - data-track-type --> organizes by content type. All learning path cards have the same type, so to should 'futher reading' links, etc. + - data-track-location --> organizes by location of click. Should be split into these categories only: + - global-nav --> navigation links on the top bar should have this, as should footer components + - list-card --> learning path and tool list cards should have these types + - learning-path-nav --> navigation buttons in the application: 'next' button, 'prev' button, left-hand navigation + - metadata --> any metadata links; above LPs and installs, and in 'next steps' page + - content --> all links from user-generated markdown should have this. the 'render-link.html' should implement this tracker + - data-track-name --> specific name of the element, human readable to link behavior. A click on a learning path should render its title, etc. This is dynamic + + - search-interaction + Attributes tracked: + - facet-active-names --> add comma-seperated facets as they get added, including group. Examples: 'subject:CI-CD' 'subject:CI-CD,subject:ML' 'subject:CI-CD,Operating System:Linux' + - search-current-query --> add current search query; done after blur of search query + +*/ + + +function trackSearchInteraction(){ + // Get active filters + // Get current search term + // Send tracker + + // Get all active filters, condense into the following str format: 'subject:CI-CD,subject:ML,Operating System:Linux' + let formatted_active_filters = '' + const active_tags = document.getElementsByClassName('filter-facet'); + if (!(active_tags.length==0)) { + for (tag of active_tags) { + let all_tag_classes = tag.classList; + for (c of all_tag_classes) { + if (c.includes('group-')) { + let group_name = c.replace('group-',''); + //let facet_name = tag.id.replace('filter-tag-',''); + let facet_name = tag.querySelector('.filter-facet-display-name').innerHTML; + formatted_active_filters = formatted_active_filters+','+group_name+':'+facet_name; + break // move to next tag + } + } + } + } + formatted_active_filters = formatted_active_filters.replace(/^,/, ''); // replace first , with empty, if present + + // Get search query (inside promise, continue the rest of this inside the promise) + document.getElementById('search-box').value().then((value) => { + let current_search = value; + + + console.log(formatted_active_filters); + console.log(current_search); + + // Send tracking data + _satellite.track('search-interaction', { + 'facet-active-names' : formatted_active_filters, + 'search-current-query' : current_search + }); + }); + + +} + + + // Go page by page, and assign the analytics tracker event component to appropriate ares. + + + // wait for all DOM elements to be loaded first, then can assign event listeners to them. + document.addEventListener("DOMContentLoaded", function() { + let current_path = window.location.pathname; + + let depth_of_path= current_path.split('/').length - 1 // Get number of '/' in the string; will help identify where we are in the heirarcy + console.log(current_path,depth_of_path); + + // + // Homepage + // =================== + if (current_path == '/') { + /* Assign to the following components: + 1. Each main LP category card + 2. Tool install search box + 3. Tool install 'see all' link + */ + + // 1) Learning Path category card + let main_category_cards = document.getElementsByClassName('main-topic-card'); + for (card of main_category_cards) { + card.addEventListener("click", () => { + _satellite.track('content-interaction', { + 'data-track-type' : 'Homepage Categories', + 'data-track-location' : 'list-card', + 'data-track-name' : card.id + }); + }); + } + } + + + + // + // Learning Path list page + // =================== + else if ( (depth_of_path == 3) & (current_path.includes('/learning-paths/')) ) { + /* Assign to the following components: + 1. Search box -> On deselect (left search bar, including clicking on content) or after 5 sec inactivity (scrolling down page, keep typing in search or delete search) + 2. Facet boxes + 3. Learning Path cards + 4. Get started alert area + */ + + // 1) Search box + let search_box = document.getElementById('search-box'); + search_box.addEventListener('blur', () => { + trackSearchInteraction(); + }); + + // 2) Facet boxes + let filter_facet_elements = document.querySelectorAll('ads-checkbox'); + for (facet of filter_facet_elements) { + facet.addEventListener("click", () => { + trackSearchInteraction(); + }); + } + + + // 3) Learning Path cards + let learning_path_card = document.querySelectorAll('.path-card:not(.global-nav-path-card)'); // Exclude global nav cards, if existant. + for (card of learning_path_card) { + card.addEventListener("click", () => { + let card_title = card.querySelector('.search-title').innerHTML; + _satellite.track('content-interaction', { + 'data-track-type' : 'Learning Path result card', + 'data-track-location' : 'list-card', + 'data-track-name' : card_title + }); + }); + } + } + }); + + + + diff --git a/static/js/search-and-filter/filter-learning-paths.js b/static/js/search-and-filter/filter-learning-paths.js index 84a23ac506..534fe1dc2b 100644 --- a/static/js/search-and-filter/filter-learning-paths.js +++ b/static/js/search-and-filter/filter-learning-paths.js @@ -124,7 +124,7 @@ function addFacet(element) { ` - ${display_tag} +
${display_tag}
diff --git a/themes/arm-design-system-hugo-theme/layouts/_default/_markup/render-link.html b/themes/arm-design-system-hugo-theme/layouts/_default/_markup/render-link.html new file mode 100644 index 0000000000..34525eb090 --- /dev/null +++ b/themes/arm-design-system-hugo-theme/layouts/_default/_markup/render-link.html @@ -0,0 +1,8 @@ + + + +{{ .Text | safeHTML }} +{{ if strings.HasPrefix .Destination "http" }} {{partial "general-formatting/external-link.html"}} {{end}} + \ No newline at end of file diff --git a/themes/arm-design-system-hugo-theme/layouts/index.html b/themes/arm-design-system-hugo-theme/layouts/index.html index 313e67dd6e..13e3b014f7 100644 --- a/themes/arm-design-system-hugo-theme/layouts/index.html +++ b/themes/arm-design-system-hugo-theme/layouts/index.html @@ -7,7 +7,7 @@
{{ range (where .Site.Pages "Params.maintopic" true).ByWeight}} - +

{{.Title}}

@@ -32,7 +32,7 @@

{{.Title}}

{{ end }} - +

Looking for instructions to install a tool?

diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/footer/javascript-functions.html b/themes/arm-design-system-hugo-theme/layouts/partials/footer/javascript-functions.html index eb9d0a1808..6fbaf208f8 100644 --- a/themes/arm-design-system-hugo-theme/layouts/partials/footer/javascript-functions.html +++ b/themes/arm-design-system-hugo-theme/layouts/partials/footer/javascript-functions.html @@ -1,6 +1,10 @@ + + + + diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/header/global-nav.html b/themes/arm-design-system-hugo-theme/layouts/partials/header/global-nav.html index 12ab6fe97f..ee2407e092 100644 --- a/themes/arm-design-system-hugo-theme/layouts/partials/header/global-nav.html +++ b/themes/arm-design-system-hugo-theme/layouts/partials/header/global-nav.html @@ -14,7 +14,7 @@

{{ range (where .Site.Pages "Params.maintopic" true).ByWeight}} - +

{{.Title}}