Skip to content

Commit

Permalink
Tp1 1033 migrate ga to gtm (#12744)
Browse files Browse the repository at this point in the history
* Replace GTM ID

* Comment regarding container id added | GTM ID updated in mozfest base

* Linting corrections: indentation

* Update initial GTM setup - replace first ReactGA event: footer donate button

* Files updated from ReactGA.event to dataLayer.push: primary nav, submission form, layout signup

* Analytics events updated from ReactGA.event to dataLayer.push

* Share vote tap events updated  from ReactGA to GTM dataLayer.push

* ReactGA module removal and events update for cta-button, header-donate, and social share

* Footer social button event updated

* home-banner, primary-button, and homepage events updated

* homepage linting fix | participate donate, pulse profile, pulse profile list, and share button events updated

* CTA download event updated | ReactGA module removed from not used files

* Linting fixtures and integration tests

* Conflicts fixed in merge with main

* GTM ID correction after merged

* Duplicated angle bracket corrected

* csp_nonce template added to new inline script
  • Loading branch information
dlopezvsr authored Sep 10, 2024
1 parent f71d5a9 commit 4875003
Show file tree
Hide file tree
Showing 20 changed files with 80 additions and 68 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@

{% block ga_identifier %}
<meta name="google-site-verification" content="xuTYNuCtTC9SLIkAUtmUY9Wce5RDJofc4z4fMprPYUk" />
<meta name="ga-identifier" content="UA-87658599-15">
<!-- The current GTM ID replaced an unkown GTM container with no clear access -->
<meta name="gtm-identifier" content="GTM-PQQ8H6PM">
<script nonce="{{ request.csp_nonce }}">window.dataLayer = window.dataLayer || [];</script>
<script nonce="{{ request.csp_nonce }}">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
Expand Down
2 changes: 1 addition & 1 deletion network-api/networkapi/templates/pages/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@

{% block ga_identifier %}
<meta name="google-site-verification" content="D7k-r3fHm-XfJ9E7T1uZ5aqHJG2mx-0uUZFeBUDN2lY">
<meta name="ga-identifier" content="UA-87658599-6">
<!-- The current GTM ID replaced an unkown GTM container with no clear access -->
<meta name="gtm-identifier" content="GTM-PQQ8H6PM">
<script nonce="{{ request.csp_nonce }}">window.dataLayer = window.dataLayer || [];</script>
<script nonce="{{ request.csp_nonce }}">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
Expand Down
29 changes: 24 additions & 5 deletions source/js/buyers-guide/analytics-events.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ReactGA, GoogleAnalytics } from "../common";
import { GoogleAnalytics } from "../common";

/**
* Based on given page title and product name, generate an object to use for GA events
Expand All @@ -10,13 +10,15 @@ function getQuerySelectorEvents(pageTitle, productName) {
return {
// "site-wide" events
"[data-donate-header-button]": {
event: `donate_header_button`,
category: `buyersguide`,
action: `donate tap`,
label: `${pageTitle} donate header`,
},

// product events
"#product-company-url": {
event: `product_company_link_tap`,
category: `product`,
action: `company link tap`,
label: `company link for ${productName}`,
Expand All @@ -25,6 +27,7 @@ function getQuerySelectorEvents(pageTitle, productName) {
conditionalQuery: `#view-product-page`,
},
"#product-live-chat": {
event: `customer_support_link_tap`,
category: `product`,
action: `customer support link tap`,
label: `support link for ${productName}`,
Expand All @@ -34,6 +37,7 @@ function getQuerySelectorEvents(pageTitle, productName) {
optional_element: true,
},
"#product-email": {
event: `email_link_tap`,
category: `product`,
action: `email link tap`,
label: `email link for ${productName}`,
Expand All @@ -43,6 +47,7 @@ function getQuerySelectorEvents(pageTitle, productName) {
optional_element: true,
},
"#product-twitter": {
event: `twitter_link_tap`,
category: `product`,
action: `twitter link tap`,
label: `twitter link for ${productName}`,
Expand All @@ -52,13 +57,15 @@ function getQuerySelectorEvents(pageTitle, productName) {
optional_element: true,
},
"#creep-vote-btn": {
event: `opinion_submitted`,
category: `product`,
action: `opinion submitted`,
label: `opinion on ${productName}`,
// Custom properties (not sent to GA)
conditionalQuery: `#view-product-page`,
},
"a.privacy-policy-link": {
event: `privacy_policy_link_tap`,
category: `product`,
action: `privacy policy link tap`,
label: `policy link for ${productName}`,
Expand All @@ -67,6 +74,7 @@ function getQuerySelectorEvents(pageTitle, productName) {
conditionalQuery: `#view-product-page`,
},
".product-update-link": {
event: `update_article_link_tap`,
category: `product`,
action: `update article link tap`,
label: `update article link for ${productName}`,
Expand All @@ -77,13 +85,15 @@ function getQuerySelectorEvents(pageTitle, productName) {
optional_element: true,
},
"#mss-link": {
event: `minimum_security_standards_link_tap`,
category: `product`,
action: `minimum security standards link tap`,
label: `mss link for ${productName}`,
// Custom properties (not sent to GA)
conditionalQuery: `#view-product-page`,
},
".btn-recommend": {
event: `submit_a_product_button_tap`,
category: `buyersguide`,
action: `submit a product button tap`,
label: `submit a product button tap on ${pageTitle}`,
Expand All @@ -99,7 +109,11 @@ function getQuerySelectorEvents(pageTitle, productName) {
* @param {Object} eventData data to send as GA event
*/
function setupElementGA(element, eventData) {
element.addEventListener("click", () => ReactGA.event(eventData), true);
element.addEventListener(
"click",
() => window.dataLayer.push(eventData),
true
);
}

/**
Expand All @@ -120,7 +134,7 @@ function bindCheckboxCheckedGA(selector, eventData) {
"change",
() => {
if (checkbox.checked) {
ReactGA.event(eventData);
window.dataLayer.push(eventData);
}
},
true
Expand All @@ -147,7 +161,8 @@ function trackSearchBoxUsage() {
let searchBoxUsed = sessionStorage.getItem(SESSION_KEY);

if (!searchBoxUsed) {
ReactGA.event({
window.dataLayer.push({
event: `type_in_search_box`,
category: `buyersguide`,
action: `type in search box`,
label: `search box used`,
Expand Down Expand Up @@ -177,7 +192,8 @@ function trackGoBackToAllProductsLink() {
link.addEventListener(
"click",
() => {
ReactGA.event({
window.dataLayer.push({
event: `product_not_found_all_link_tap`,
category: `buyersguide`,
action: `product not found All link tap`,
label: `All link tap for ${searchBox.value}`,
Expand Down Expand Up @@ -228,6 +244,7 @@ const ProductGA = {

if (elements.length > 0) {
const eventData = {
event: baseData.event,
category: baseData.category,
action: baseData.action,
label: baseData.label,
Expand All @@ -248,6 +265,7 @@ const ProductGA = {
// tracks when MSS accordion on product page is expanded
if (document.querySelector(`#view-product-page`)) {
bindCheckboxCheckedGA("#view-product-page #mss-accordion-toggle", {
event: `security_expand_accordion_tap`,
category: `product`,
action: `security expand accordion tap`,
label: `detail view for MSS on for ${productName}`,
Expand All @@ -256,6 +274,7 @@ const ProductGA = {

if (document.querySelector(`body.catalog`)) {
bindCheckboxCheckedGA("body.catalog #product-filter-pni-toggle", {
event: `ding_checkbox_checked`,
category: `buyersguide`,
action: `ding checkbox checked`,
label: `ding checkbox checked on ${pageTitle}`,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from "react";
import { ReactGA } from "../../../common";
import copyToClipboard from "../../../../js/copy-to-clipboard.js";

/**
Expand All @@ -15,6 +14,7 @@ const SocialShareLink = (props) => {
props.productName
} is ${props.creepType.toUpperCase()}. What do you think? Check out the Creep-O-Meter over on @mozilla’s ${link} buyer’s guide.`;
let shareEvent = {
event: `share_vote_`,
category: `product`,
action: `share tap`,
label: `share vote `,
Expand All @@ -25,13 +25,15 @@ const SocialShareLink = (props) => {
classes += `facebook-share`;
srLabel = `Facebook`;
shareEvent.label += `to facebook`;
shareEvent.event += `to_facebook`;
link = `https://www.facebook.com/sharer/sharer.php?u=https://${link}`;
}

if (props.type === `twitter`) {
classes += `twitter-share`;
srLabel = `Twitter`;
shareEvent.label += `to twitter`;
shareEvent.event += `to_twitter`;
link = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
shareText
)}`;
Expand All @@ -41,18 +43,20 @@ const SocialShareLink = (props) => {
classes += `email-share`;
srLabel = `Email`;
shareEvent.label += `via email`;
shareEvent.event += `via_email`;
link = `mailto:?&body=${encodeURIComponent(shareText)}`;
}

if (props.type === `link`) {
classes += `link-share`;
srLabel = `Copy`;
shareEvent.label += `using a link`;
shareEvent.event += `using_a_link`;
link = `#`;
}

let trackShareAction = () => {
ReactGA.event(shareEvent);
window.dataLayer.push(shareEvent);
};

// We actually need slightly different behaviour
Expand Down
11 changes: 6 additions & 5 deletions source/js/common/template-js-handles/footer-donate-button.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,14 @@ import { ReactGA } from "../react-ga-proxy.js";
* ("Donate" button on footer)
*/
export default () => {
let donateFooterBtn = document.getElementById(`donate-footer-btn`);
let donateFooterBtn = document.getElementById("donate-footer-btn");

if (donateFooterBtn) {
donateFooterBtn.addEventListener(`click`, () => {
ReactGA.event({
category: `donate`,
action: `donate button tap`,
donateFooterBtn.addEventListener("click", () => {
window.dataLayer.push({
event: "donate_button_click",
category: "donate",
action: "donate button tap",
label: `${document.title} footer`,
});
});
Expand Down
5 changes: 3 additions & 2 deletions source/js/common/template-js-handles/header-donate-button.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ReactGA } from "../../common";
import { ReactGA } from "../react-ga-proxy.js";

/**
* Bind click handler to data-donate-header-button
Expand All @@ -11,7 +11,8 @@ export default () => {
if (donateHeaderBtn.length > 0) {
donateHeaderBtn.forEach((element) => {
element.addEventListener(`click`, () => {
ReactGA.event({
window.dataLayer.push({
event: `donate_button_tap_header`,
category: `donate`,
action: `donate button tap`,
label: `${document.title} header`,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import ButtonQuit from "../atoms/button-quit.jsx";
import APIErrorMessage from "../atoms/api-error-message.jsx";
import withSubmissionLogic from "./with-submission-logic.jsx";
import utility from "../../../utility.js";
import { ReactGA } from "../../../common";
import { getText, getCurrentLanguage } from "../../petition/locales";
import { COUNTRY_OPTIONS } from "../data/country-options.js";
import { LANGUAGE_OPTIONS } from "../data/language-options.js";
Expand Down Expand Up @@ -92,7 +91,8 @@ class DefaultSignupForm extends Component {
}

handleInputFocus() {
ReactGA.event({
window.dataLayer.push({
event: `signup_form_input_focused`,
category: `signup`,
action: `form focus`,
label: `Signup form input focused`,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from "react";
import PropTypes from "prop-types";
import { ReactGA } from "../../../common";
import { getText } from "../../petition/locales";

/**
Expand Down Expand Up @@ -104,21 +103,17 @@ function withSubmissionLogic(WrappedComponent) {
* @returns {void}
*/
trackFormSubmit(formData) {
ReactGA.event({
category: `signup`,
action: `form submit tap`,
label: `Signup submitted from ${
this.props.formPosition ? this.props.formPosition : document.title
}`,
});

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "form_submission",
event: "form_submission_newsletter_signup",
category: `signup_submitted_from`,
action: `form submit tap`,
form_type: "newsletter_signup",
form_location: this.props.formPosition || null,
country: formData.country,
language: formData.language,
label: `Signup submitted from ${
this.props.formPosition ? this.props.formPosition : document.title
}`,
});
}

Expand Down
1 change: 0 additions & 1 deletion source/js/components/petition/petition-thank-you.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Component } from "react";
import { ReactGA } from "../../common";
import DonationModal from "./donation-modal.jsx";
import copyToClipboard from "../../copy-to-clipboard";

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { ReactGA } from "../../../../common";

/**
* Bind handler to CTA button on Dear Internet page
*/
Expand All @@ -9,7 +7,8 @@ export default () => {
if (!ctaButton) return;

ctaButton.addEventListener(`click`, () => {
ReactGA.event({
window.dataLayer.push({
event: `main_cta_donate_button_tap`,
category: `donate`,
action: `donate button tap`,
label: `main CTA`,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { ReactGA } from "../../../../common";

/**
* Bind handler to social buttons on MozFest footer
*/
Expand All @@ -8,7 +6,8 @@ export default () => {
.querySelectorAll(`body.mozfest footer a[data-platform]`)
.forEach((button) => {
button.addEventListener(`click`, () => {
ReactGA.event({
window.dataLayer.push({
event: `footer_social_button_tap`,
category: `social`,
action: `social button tap`,
label: `${button.dataset.platform} footer button tap`,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { ReactGA } from "../../../../common";

/**
* Mozfest hero banner video component.
* Provides play/pause buttons functionality, as well as GA tracking of video plays.
Expand Down Expand Up @@ -100,7 +98,8 @@ const backgroundHardcodedVideoHandler = () => {

// Track video watches in google analytics
const trackWatchVideoClicks = () => {
ReactGA.event({
window.dataLayer.push({
event: `cta_watch_video_tap`,
category: `CTA`,
action: `watch video tap`,
label: `watch video button tap`,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { ReactGA } from "../../../../common";

/**
* Bind handler to primary buttons on MozFest
*/
Expand All @@ -8,7 +6,8 @@ export default () => {
.querySelectorAll(`body.mozfest .cms a.tw-btn-primary`)
.forEach((button) => {
button.addEventListener(`click`, () => {
ReactGA.event({
window.dataLayer.push({
event: `cta_button_tap`,
category: `CTA`,
action: `button tap`,
label: button.innerText,
Expand Down
Loading

0 comments on commit 4875003

Please sign in to comment.