maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

baseTracking Initializer Migration (#19016)

Browse source 
* baseTracking pack

* Define dataLayer

* disable unused var

* disable another unused var

* remove initializer call from base of asset pipeline

* remove asset pipeline baseTracking file
This commit is contained in:
Lawrence 2023-02-02 13:15:36 -06:00 • committed by GitHub
parent f9a7b93bc1
commit df678d2c03
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/javascripts/initializePage.js
View file

@ -1,7 +1,7 @@
/*
global initializeLocalStorageRender, initializeBodyData,
initializeAllTagEditButtons, initializeUserFollowButts,
initializeBaseTracking, initializeCommentsPage,
initializeCommentsPage,
initializeArticleDate, initializeArticleReactions, initNotifications,
initializeCommentDate, initializeSettings,
initializeCommentPreview, initializeRuntimeBanner,
@ -15,7 +15,6 @@
*/
function callInitializers() {
initializeBaseTracking();
initializePaymentPointers();
initializeCommentsPage();
initializeArticleDate();

98
app/assets/javascripts/initializers/initializeBaseTracking.js.erb → app/javascript/packs/baseTracking.js
View file

@ -3,17 +3,17 @@ function initializeBaseTracking() {
trackGoogleAnalytics4();
trackCustomImpressions();
}
function trackGoogleAnalytics3() {
var wait = 0;
var addedGA = false;
var gaTrackingCode = document.body.dataset.gaTracking;
let wait = 0;
let addedGA = false;
const gaTrackingCode = document.body.dataset.gaTracking;
if (gaTrackingCode) {
var waitingOnGA = setInterval(function() {
const waitingOnGA = setInterval(() => {
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)
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;
@ -34,27 +34,28 @@ function trackGoogleAnalytics3() {
}
function trackGoogleAnalytics4() {
var wait = 0;
var addedGA4 = false;
var ga4MeasurementCode = document.body.dataset.ga4TrackingId;
let wait = 0;
let addedGA4 = false;
const ga4MeasurementCode = document.body.dataset.ga4TrackingId;
if (ga4MeasurementCode) {
var waitingOnGA4 = setInterval(function() {
const waitingOnGA4 = setInterval(() => {
if (!addedGA4) {
<%# Dynamically add the Google Analytics 4 script tag %>
var script = document.createElement('script');
script.src = "//www.googletagmanager.com/gtag/js?id=" + ga4MeasurementCode;
//Dynamically add the Google Analytics 4 script tag
const script = document.createElement('script');
script.src = `//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 %>
//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);}
// eslint-disable-next-line no-inner-declarations
function gtag(){window.dataLayer.push(arguments);}
window['gtag'] = window['gtag'] || function () {
dataLayer.push(arguments)
window.dataLayer.push(arguments)
}
gtag('js', new Date());
@ -63,9 +64,9 @@ function trackGoogleAnalytics4() {
}
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(); %>
//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();
@ -74,22 +75,22 @@ function trackGoogleAnalytics4() {
function fallbackActivityRecording() {
var tokenMeta = document.querySelector("meta[name='csrf-token']")
const 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 = {
const csrfToken = tokenMeta.getAttribute('content')
const w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
const h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
const screenW = window.screen.availWidth;
const screenH = window.screen.availHeight;
const 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,
viewport_size: `${h }x${ w}`,
screen_resolution: `${screenH }x${ screenW}`,
document_title: document.title,
document_encoding: document.characterSet,
document_path: location.pathname + location.search,
@ -106,7 +107,7 @@ function fallbackActivityRecording() {
}
function eventListening(){
var registerNowButt = document.getElementById("cta-comment-register-now-link");
const registerNowButt = document.getElementById("cta-comment-register-now-link");
if (registerNowButt) {
registerNowButt.onclick = function(){
ga('send', 'event', 'click', 'register-now-click', null, null);
@ -114,8 +115,9 @@ function eventListening(){
}
}
// eslint-disable-next-line no-unused-vars
function ga4eventListening(){
var registerNowButt = document.getElementById("cta-comment-register-now-link");
const registerNowButt = document.getElementById("cta-comment-register-now-link");
if (registerNowButt) {
registerNowButt.onclick = function(){
gtag('event', 'register-now-click' );
@ -123,33 +125,43 @@ function ga4eventListening(){
}
}
function checkUserLoggedIn() {
const {body} = document;
if (!body) {
return false;
}
return body.getAttribute('data-user-status') === 'logged-in';
}
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
setTimeout(()=> {
const ArticleElement = document.getElementById('article-body') || document.getElementById('comment-article-indicator');
const tokenMeta = document.querySelector("meta[name='csrf-token']")
const isBot = /bot|google|baidu|bing|msn|duckduckbot|teoma|slurp|yandex/i.test(navigator.userAgent) // is crawler
// eslint-disable-next-line no-unused-vars
const windowBigEnough = window.innerWidth > 1023
// 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
const randomNumber = Math.floor(Math.random() * 10); // 1 in 10; Only track 1 in 10 impressions
if (!checkUserLoggedIn() && randomNumber != 1) {
return;
}
var dataBody = {
const dataBody = {
article_id: ArticleElement.dataset.articleId,
referrer: document.referrer,
user_agent: navigator.userAgent,
};
var csrfToken = tokenMeta.getAttribute('content');
const csrfToken = tokenMeta.getAttribute('content');
trackPageView(dataBody, csrfToken);
var timeOnSiteCounter = 0;
var timeOnSiteInterval = setInterval(function(){
let timeOnSiteCounter = 0;
const timeOnSiteInterval = setInterval(()=> {
timeOnSiteCounter++
var ArticleElement = document.getElementById('article-body') || document.getElementById('comment-article-indicator');
const ArticleElement = document.getElementById('article-body') || document.getElementById('comment-article-indicator');
if (ArticleElement && checkUserLoggedIn()) {
trackFifteenSecondsOnPage(ArticleElement.dataset.articleId, csrfToken);
} else {
@ -177,7 +189,7 @@ function trackPageView(dataBody, csrfToken) {
}
function trackFifteenSecondsOnPage(articleId, csrfToken) {
window.fetch('/page_views/' + articleId, {
window.fetch(`/page_views/${ articleId}`, {
method: 'PATCH',
headers: {
'X-CSRF-Token': csrfToken,
@ -186,3 +198,5 @@ function trackFifteenSecondsOnPage(articleId, csrfToken) {
credentials: 'same-origin',
}).catch((error) => console.error(error))
}
initializeBaseTracking();

4
app/views/layouts/application.html.erb
View file

@ -20,9 +20,9 @@
<%= render "layouts/styles", qualifier: "main" %>
<%= javascript_include_tag "base", defer: true %>
<% if user_signed_in? %>
<%= javascript_packs_with_chunks_tag "base", "Search", "runtimeBanner", "onboardingRedirectCheck", "contentDisplayPolicy", defer: true %>
<%= javascript_packs_with_chunks_tag "base", "Search", "runtimeBanner", "onboardingRedirectCheck", "contentDisplayPolicy", "baseTracking", defer: true %>
<% else %>
<%= javascript_packs_with_chunks_tag "base", "Search", "runtimeBanner", defer: true %>
<%= javascript_packs_with_chunks_tag "base", "Search", "runtimeBanner", "baseTracking", defer: true %>
<% end %>
<%= yield(:page_meta) %>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">