Skip to content

TEMPLATE: adding analytics tracking to share & CTAs on next steps page. #1563

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 27, 2025
Merged

TEMPLATE: adding analytics tracking to share & CTAs on next steps page. #1563

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b6b942c
adding analytics to share & CTAs on next steps
Jan 24, 2025
c396c54
Merge branch 'ArmDeveloperEcosystem:main' into main
zachlasiuk Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions themes/arm-design-system-hugo-theme/layouts/partials/learning-paths/next-steps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,44 +55,44 @@
<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>
</svg>
</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>
Expand Down Expand Up @@ -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");
Expand All @@ -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" ",") }}

Expand Down Expand Up @@ -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");
Expand All @@ -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");
Expand Down
67 changes: 51 additions & 16 deletions themes/arm-design-system-hugo-theme/static/js/anonymous-analytics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
*/


Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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) {
Expand All @@ -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", () => {
Expand All @@ -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", () => {
Expand All @@ -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", () => {
Expand All @@ -450,6 +484,7 @@ function attachPageFindSearchTracker() {
});
});
}
*/


// 4a) Navitaion from navbar
Expand Down