304 lines
10 KiB
Text
304 lines
10 KiB
Text
function initializeBaseTracking() {
|
|
trackGoogleAnalytics3();
|
|
trackGoogleAnalytics4();
|
|
trackCustomImpressions();
|
|
}
|
|
|
|
function trackGoogleAnalytics3() {
|
|
var wait = 0;
|
|
var addedGA = false;
|
|
var gaTrackingCode = document.body.dataset.gaTracking;
|
|
if (gaTrackingCode) {
|
|
var waitingOnGA = setInterval(function() {
|
|
if (!addedGA) {
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
}
|
|
addedGA = true;
|
|
wait++;
|
|
if (window.ga && ga.create) {
|
|
ga('create', gaTrackingCode, 'auto');
|
|
ga('set', 'anonymizeIp', true);
|
|
ga('send', 'pageview', location.pathname + location.search);
|
|
clearInterval(waitingOnGA);
|
|
}
|
|
if (wait > 85) {
|
|
clearInterval(waitingOnGA);
|
|
fallbackActivityRecording();
|
|
}
|
|
}, 25);
|
|
eventListening();
|
|
}
|
|
}
|
|
|
|
function trackGoogleAnalytics4() {
|
|
var wait = 0;
|
|
var addedGA4 = false;
|
|
var ga4MeasurementCode = document.body.dataset.ga4TrackingId;
|
|
if (ga4MeasurementCode) {
|
|
var waitingOnGA4 = setInterval(function() {
|
|
if (!addedGA4) {
|
|
<%# Dynamically add the Google Analytics 4 script tag %>
|
|
var script = document.createElement('script');
|
|
script.src = "http://www.googletagmanager.com/gtag/js?id=" + ga4MeasurementCode;
|
|
script.async = true;
|
|
document.head.appendChild(script);
|
|
}
|
|
addedGA4 = true;
|
|
wait++;
|
|
if (window.google_tag_manager) {
|
|
<%# Define the gtag function and call it. Adapted from https://stackoverflow.com/questions/22716542/google-analytics-code-explanation %>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
|
|
window['gtag'] = window['gtag'] || function () {
|
|
dataLayer.push(arguments)
|
|
}
|
|
|
|
gtag('js', new Date());
|
|
gtag('config', ga4MeasurementCode, { 'anonymize_ip': true });
|
|
clearInterval(waitingOnGA4);
|
|
}
|
|
if (wait > 85) {
|
|
clearInterval(waitingOnGA4);
|
|
<%# The gem we're using server-side (Staccato) is not yet compatible with the Google Analytics 4 tracking code.
|
|
More details: https://github.com/tpitale/staccato/issues/97 %>
|
|
<%# fallbackActivityRecording(); %>
|
|
}
|
|
}, 25);
|
|
eventListening();
|
|
}
|
|
}
|
|
|
|
|
|
function fallbackActivityRecording() {
|
|
var tokenMeta = document.querySelector("meta[name='csrf-token']")
|
|
if (!tokenMeta) {
|
|
return
|
|
}
|
|
var csrfToken = tokenMeta.getAttribute('content')
|
|
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
|
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
|
var screenW = window.screen.availWidth;
|
|
var screenH = window.screen.availHeight;
|
|
var dataBody = {
|
|
path: location.pathname + location.search,
|
|
user_language: navigator.language,
|
|
referrer: document.referrer,
|
|
user_agent: navigator.userAgent,
|
|
viewport_size: h + 'x' + w,
|
|
screen_resolution: screenH + 'x' + screenW,
|
|
document_title: document.title,
|
|
document_encoding: document.characterSet,
|
|
document_path: location.pathname + location.search,
|
|
};
|
|
window.fetch('/fallback_activity_recorder', {
|
|
method: 'POST',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'X-CSRF-Token': csrfToken,
|
|
},
|
|
body: JSON.stringify(dataBody),
|
|
credentials: 'same-origin'
|
|
});
|
|
}
|
|
|
|
function eventListening(){
|
|
var registerNowButt = document.getElementById("cta-comment-register-now-link");
|
|
if (registerNowButt) {
|
|
registerNowButt.onclick = function(){
|
|
ga('send', 'event', 'click', 'register-now-click', null, null);
|
|
}
|
|
}
|
|
}
|
|
|
|
function ga4eventListening(){
|
|
var registerNowButt = document.getElementById("cta-comment-register-now-link");
|
|
if (registerNowButt) {
|
|
registerNowButt.onclick = function(){
|
|
gtag('event', 'register-now-click' );
|
|
}
|
|
}
|
|
}
|
|
|
|
function trackCustomImpressions() {
|
|
setTimeout(function(){
|
|
var ArticleElement = document.getElementById('article-body') || document.getElementById('comment-article-indicator');
|
|
var tokenMeta = document.querySelector("meta[name='csrf-token']")
|
|
var isBot = /bot|google|baidu|bing|msn|duckduckbot|teoma|slurp|yandex/i.test(navigator.userAgent) // is crawler
|
|
var windowBigEnough = window.innerWidth > 1023
|
|
|
|
// Sidebar HTML variant tracking
|
|
var stickyNav = document.getElementById('article-show-primary-sticky-nav');
|
|
var sidebarHTMLVariant = document.getElementById('html-variant-article-show-sidebar');
|
|
if (sidebarHTMLVariant && ArticleElement && tokenMeta && !isBot && windowBigEnough) {
|
|
var dataBody = {
|
|
html_variant_id: sidebarHTMLVariant.dataset.variantId,
|
|
article_id: ArticleElement.dataset.articleId,
|
|
};
|
|
var csrfToken = tokenMeta.getAttribute('content');
|
|
trackHTMLVariantTrial(dataBody, csrfToken)
|
|
var successLinks = stickyNav.querySelectorAll('a,button'); //track all links and button clicks within nav
|
|
for(var i = 0; i < successLinks.length; i++)
|
|
{
|
|
successLinks[i].addEventListener('click', function() { trackHtmlVariantSuccess(dataBody, csrfToken) });
|
|
}
|
|
}
|
|
|
|
// Below article HTML variant tracking
|
|
var belowArticleHTMLVariant = document.getElementById('html-variant-article-show-below-article');
|
|
if (belowArticleHTMLVariant && ArticleElement && tokenMeta && !isBot && windowBigEnough) {
|
|
var dataBody = {
|
|
html_variant_id: belowArticleHTMLVariant.dataset.variantId,
|
|
article_id: ArticleElement.dataset.articleId,
|
|
};
|
|
var csrfToken = tokenMeta.getAttribute('content');
|
|
trackHTMLVariantTrial(dataBody, csrfToken)
|
|
var successLinks = belowArticleHTMLVariant.querySelectorAll('a,button'); //track all links and button clicks within nav
|
|
for(var i = 0; i < successLinks.length; i++)
|
|
{
|
|
successLinks[i].addEventListener('click', function() { trackHtmlVariantSuccess(dataBody, csrfToken) });
|
|
}
|
|
}
|
|
|
|
// page view
|
|
if (ArticleElement && tokenMeta && !isBot) {
|
|
// See https://github.com/forem/forem/blob/main/app/controllers/page_views_controller.rb
|
|
//
|
|
// If you change the 10, you should look at the PageViewsController as well.
|
|
var randomNumber = Math.floor(Math.random() * 10); // 1 in 10; Only track 1 in 10 impressions
|
|
if (!checkUserLoggedIn() && randomNumber != 1) {
|
|
return;
|
|
}
|
|
var dataBody = {
|
|
article_id: ArticleElement.dataset.articleId,
|
|
referrer: document.referrer,
|
|
user_agent: navigator.userAgent,
|
|
};
|
|
var csrfToken = tokenMeta.getAttribute('content');
|
|
trackPageView(dataBody, csrfToken);
|
|
var timeOnSiteCounter = 0;
|
|
var timeOnSiteInterval = setInterval(function(){
|
|
timeOnSiteCounter++
|
|
var ArticleElement = document.getElementById('article-body') || document.getElementById('comment-article-indicator');
|
|
if (ArticleElement && checkUserLoggedIn()) {
|
|
trackFifteenSecondsOnPage(ArticleElement.dataset.articleId, csrfToken);
|
|
} else {
|
|
clearInterval(timeOnSiteInterval);
|
|
}
|
|
if ( timeOnSiteCounter > 118 ) {
|
|
clearInterval(timeOnSiteInterval);
|
|
}
|
|
}, 15000)
|
|
}
|
|
|
|
// display add
|
|
var displayAds = document.querySelectorAll('[data-display-unit]');
|
|
if (displayAds.length > 0
|
|
&& tokenMeta
|
|
&& !isBot
|
|
&& windowBigEnough
|
|
&& checkUserLoggedIn()) {
|
|
var csrfToken = tokenMeta.getAttribute('content');
|
|
displayAds.forEach(unit => {
|
|
trackAdImpression(csrfToken, unit);
|
|
unit.removeEventListener('click', trackAdClick, false );
|
|
unit.addEventListener('click', function(e) { trackAdClick(csrfToken, e.target) });
|
|
});
|
|
}
|
|
}, 1800)
|
|
}
|
|
|
|
function trackHTMLVariantTrial(dataBody, csrfToken) {
|
|
var randomNumber = Math.floor(Math.random() * 10); // 1 in 10; Only track 1 in 10 impressions
|
|
if (randomNumber === 1) {
|
|
window.fetch('/html_variant_trials', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-Token': csrfToken,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(dataBody),
|
|
credentials: 'same-origin',
|
|
});
|
|
}
|
|
}
|
|
|
|
function trackHtmlVariantSuccess(dataBody, csrfToken) {
|
|
window.fetch('/html_variant_successes', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-Token': csrfToken,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(dataBody),
|
|
credentials: 'same-origin',
|
|
})
|
|
}
|
|
|
|
function trackPageView(dataBody, csrfToken) {
|
|
window.fetch('/page_views', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-Token': csrfToken,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(dataBody),
|
|
credentials: 'same-origin',
|
|
})
|
|
}
|
|
|
|
function trackFifteenSecondsOnPage(articleId, csrfToken) {
|
|
window.fetch('/page_views/' + articleId, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'X-CSRF-Token': csrfToken,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
credentials: 'same-origin',
|
|
}).catch((error) => console.error(error))
|
|
}
|
|
|
|
function trackAdImpression(token, adBox) {
|
|
var dataBody = {
|
|
display_ad_event: {
|
|
display_ad_id: adBox.dataset.id,
|
|
context_type: "<%= DisplayAdEvent::CONTEXT_TYPE_HOME %>",
|
|
category: "<%= DisplayAdEvent::CATEGORY_IMPRESSION %>",
|
|
}
|
|
}
|
|
window.fetch('/display_ad_events', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-Token': token,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(dataBody),
|
|
credentials: 'same-origin',
|
|
}).catch((error) => console.error(error))
|
|
}
|
|
|
|
function trackAdClick(token, clickedElement) {
|
|
var adBox = clickedElement.closest('[data-display-unit]');
|
|
if (!adClicked) {
|
|
var dataBody = {
|
|
display_ad_event: {
|
|
display_ad_id: adBox.dataset.id,
|
|
context_type: "<%= DisplayAdEvent::CONTEXT_TYPE_HOME %>",
|
|
category: "<%= DisplayAdEvent::CATEGORY_CLICK %>",
|
|
}
|
|
}
|
|
window.fetch('/display_ad_events', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-Token': token,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(dataBody),
|
|
credentials: 'same-origin',
|
|
})
|
|
}
|
|
adClicked = true;
|
|
}
|