Skip to content

Commit 977b474

Browse files
DOC-4329: Ketch footer and Segment updates (#179)
* Add consent management link to footer * dynamic footer text and consent context added to segment calls * fix consent object * Make footer link conditional * Shorten data-track attribute * Squash merge remove-gtm-scripts into DOC-4329-footer * fix track events so they use consent context correctly. Only load segment if the user consents to analytics * manual ketch url for testing purposes, revert this soon * test showing ketch preferences on load * fix segment object * load segment initially, update ketch scripts * hard code keys * undo hard coded site keys * add ketch logic to js file and let middleware handle context * update to latest changes from marketing without gtag scripts * UNDO THIS - hard coding segment and ketch site keys * use segment prod source * force a rebuild * use dev segment source * add gtag script and use staging www site footer link * put site keys back --------- Co-authored-by: Cole Goldsmith <[email protected]>
1 parent 83b6aff commit 977b474

File tree

7 files changed

+127
-15
lines changed

7 files changed

+127
-15
lines changed

src/js/04-segment-analytics.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,35 @@
11
;(function () {
22
'use strict'
33

4+
const trackEvent = (name, payload) => {
5+
if (window.analytics) {
6+
window.analytics.track(name, payload || {})
7+
}
8+
}
9+
10+
const trackLinkEvent = (element, name, payload) => {
11+
if (window.analytics) {
12+
window.analytics.trackLink(element, name, payload || {})
13+
}
14+
}
15+
16+
// Add click event listeners to all elements with a data-track attribute.
417
if (window.analytics) {
518
const trackedLinkElements = document.querySelectorAll('a[data-track]')
619
const trackedElements = document.querySelectorAll('[data-track]:not(a)')
720

821
trackedLinkElements.forEach((element) => {
9-
window.analytics.trackLink(element, element.dataset.track)
22+
trackLinkEvent(element, element.dataset.track)
1023
})
1124

1225
trackedElements.forEach((element) => {
1326
element.addEventListener('click', (e) => {
14-
window.analytics.track(element.dataset.track)
27+
trackEvent(element.dataset.track)
1528
})
1629
})
1730
}
31+
32+
// Expose trackEvent and trackLinkEvent to the global scope.
33+
window.trackEvent = trackEvent
34+
window.trackLinkEvent = trackLinkEvent
1835
})()

src/js/05-feedback-dialog.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@
4040
form.onsubmit = (e) => {
4141
e.preventDefault()
4242
const message = form.elements.message.value
43-
if (message && window.analytics) {
44-
window.analytics.track('Feedback Form', {
43+
if (message && window.trackEvent) {
44+
window.trackEvent('Feedback Form', {
4545
message,
4646
})
4747
}

src/js/07-copy-to-clipboard.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,9 +92,9 @@
9292
}
9393

9494
function trackCopy (language, title, text) {
95-
if (window.analytics) {
95+
if (window.trackEvent) {
9696
var sample = text.slice(0, 50).replace(/\s+/g, ' ').trim()
97-
window.analytics.track('Code Snippet Copied', {
97+
window.trackEvent('Code Snippet Copied', {
9898
snippetLanguage: language,
9999
snippetTitle: title,
100100
snippetSample: sample,

src/js/10-ketch-consent.js

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
;(function () {
2+
'use strict'
3+
4+
window.analytics.ready(() => {
5+
window.ketch('once', 'consent', onKetchConsent)
6+
window.ketch('on', 'consent', onKetchConsentGtagTrack)
7+
window.ketch('on', 'userConsentUpdated', onKetchConsentUpdated)
8+
})
9+
10+
// If the user is in the US-CA region, change the text of the preference center link
11+
window.ketch('on', 'regionInfo', (regionInfo) => {
12+
const customTextRegions = ['US-CA']
13+
if (customTextRegions.includes(regionInfo)) {
14+
const preferenceCenterLinkElement = document.getElementById('preferenceCenterLink')
15+
if (preferenceCenterLinkElement) {
16+
preferenceCenterLinkElement.textContent = 'Do Not Sell My Personal Information'
17+
}
18+
}
19+
})
20+
21+
// If the user is in the default jurisdiction, remove the preference center link
22+
window.ketch('on', 'jurisdiction', (jurisdiction) => {
23+
if (jurisdiction.includes('default')) {
24+
const preferenceCenterContainerElement = document.getElementById('preferenceCenterContainer')
25+
if (preferenceCenterContainerElement) {
26+
preferenceCenterContainerElement.remove()
27+
}
28+
}
29+
})
30+
31+
// Once - This will be fired only one time, will initialize all the main features.
32+
const onKetchConsent = (consent) => {
33+
window.ketchConsent = consent
34+
addKetchConsentToContextMiddleware()
35+
window.analytics.page()
36+
// loadScripts(); // Load any script if we have scripts to fire after ketch consent is fired.
37+
}
38+
39+
// on - Each time the user changes the preferences, save them to the global variable
40+
const onKetchConsentUpdated = (consent) => {
41+
window.ketchConsent = consent
42+
}
43+
44+
// On - each time the consent is loaded, track it to the gtag event
45+
const onKetchConsentGtagTrack = (consent) => {
46+
if (window.gtag &&
47+
consent.purposes &&
48+
'analytics' in consent.purposes &&
49+
'targeted_advertising' in consent.purposes
50+
) {
51+
const analyticsString = consent.purposes.analytics === true ? 'granted' : 'denied'
52+
const targetedAdsString = consent.purposes.targeted_advertising === true ? 'granted' : 'denied'
53+
54+
const gtagObject = {
55+
analytics_storage: analyticsString,
56+
ad_personalization: targetedAdsString,
57+
ad_storage: targetedAdsString,
58+
ad_user_data: targetedAdsString,
59+
}
60+
window.gtag('consent', 'update', gtagObject)
61+
}
62+
}
63+
64+
// Use the analytics.addSourceMiddleware function to include the consent on all the events
65+
const addKetchConsentToContextMiddleware = () => {
66+
window.analytics.addSourceMiddleware(({ payload, next }) => {
67+
if (window.ketchConsent) {
68+
const analyticsString = window.ketchConsent.purposes.analytics === true ? 'granted' : 'denied'
69+
const targetedAdsString = window.ketchConsent.purposes.targeted_advertising === true ? 'granted' : 'denied'
70+
71+
payload.obj.properties = {
72+
...(payload.obj.properties || {}),
73+
analyticsStorageConsentState: analyticsString,
74+
adsStorageConsentState: targetedAdsString,
75+
adUserDataConsentState: targetedAdsString,
76+
adPersonalizationConsentState: targetedAdsString,
77+
}
78+
payload.obj.context.consent = {
79+
categoryPreferences: window.ketchConsent?.purposes,
80+
}
81+
}
82+
next(payload)
83+
})
84+
}
85+
})()

src/partials/footer.hbs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,16 @@
2424
target="_blank"
2525
data-track="Footer Terms of Use Link Clicked"
2626
>Terms of use</a>
27+
{{#with site.keys.ketchSmartTagUrl}}
28+
<span id="preferenceCenterContainer">
29+
|
30+
<a
31+
id="preferenceCenterLink"
32+
href="https://www.datastax.com/preferences"
33+
data-track="Footer Consent Preference Link Clicked"
34+
>Manage Privacy Choices</a>
35+
</span>
36+
{{/with}}
2737
</span>
2838
</p>
2939
<p class="text-tertiary !m-0 max-w-[640px] text-xs">Apache, Apache

src/partials/head-prelude.hbs

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,2 @@
11
<meta charset="utf-8">
22
<meta name="viewport" content="width=device-width,initial-scale=1">
3-
{{#with site.keys.ketchSmartTagUrl}}
4-
<script>!function(){window.semaphore=window.semaphore||[],window.ketch=function(){window.semaphore.push(arguments)};var e=document.createElement("script");e.type="text/javascript",e.src="{{this}}",e.defer=e.async=!0,document.getElementsByTagName("head")[0].appendChild(e)}();</script>
5-
{{/with}}

src/partials/head-scripts.hbs

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
{{#with site.keys.segment}}
2-
<script>
3-
!function(){var i="analytics",analytics=window[i]=window[i]||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"];analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);var n=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(e)>-1){var c=document.querySelector("link[rel='canonical']");n.push({__t:"bpc",c:c&&c.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}n.unshift(e);analytics.push(n);return analytics}};for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.setAttribute("data-global-segment-analytics-key",i);t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._loadOptions=n};analytics._writeKey="{{this}}";;analytics.SNIPPET_VERSION="5.2.1";
4-
analytics.load("{{this}}");
5-
analytics.page();
6-
}}();
7-
</script>
2+
<script>
3+
!function(){var i="analytics",analytics=window[i]=window[i]||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"];analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);var n=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(e)>-1){var c=document.querySelector("link[rel='canonical']");n.push({__t:"bpc",c:c&&c.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}n.unshift(e);analytics.push(n);return analytics}};for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.setAttribute("data-global-segment-analytics-key",i);t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._loadOptions=n};analytics._writeKey="{{this}}";;analytics.SNIPPET_VERSION="5.2.1";
4+
analytics.load("{{this}}");
5+
}}();
6+
</script>
7+
{{/with}}
8+
9+
{{#with site.keys.ketchSmartTagUrl}}
10+
<script>!function(){window.semaphore=window.semaphore||[],window.ketch=function(){window.semaphore.push(arguments)};var e=document.createElement("script");e.type="text/javascript",e.src="{{this}}",e.defer=e.async=!0,document.getElementsByTagName("head")[0].appendChild(e)}();</script>
811
{{/with}}
912

1013
<script>var uiRootPath = '{{{uiRootPath}}}'</script>

0 commit comments

Comments
 (0)