Merge branch 'main' into tp1081-donate-notice-sync

MozillaFoundation · Sep 10, 2024 · 2c20248 · 2c20248
2 parents 2fb84c3 + 4875003
commit 2c20248
Show file tree

Hide file tree

Showing 23 changed files with 139 additions and 102 deletions.
diff --git a/network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html b/network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html
@@ -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=

diff --git a/network-api/networkapi/templates/pages/base.html b/network-api/networkapi/templates/pages/base.html
@@ -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=

diff --git a/network-api/networkapi/wagtailpages/pagemodels/campaigns.py b/network-api/networkapi/wagtailpages/pagemodels/campaigns.py
@@ -74,6 +74,8 @@ class Meta:
 
 
 class CTA(CTABase):
+    panels = CTABase.panels
+
     class Meta:
         ordering = ["-id"]
         verbose_name_plural = "CTA"
@@ -136,6 +138,16 @@ class Callpower(TranslatableMixin, CTA):
         index.FilterField("locale_id"),
     ]
 
+    panels = CTA.panels + [
+        FieldPanel("campaign_id"),
+        FieldPanel("call_button_label"),
+        FieldPanel("success_heading"),
+        FieldPanel("success_text"),
+        FieldPanel("share_twitter"),
+        FieldPanel("share_facebook"),
+        FieldPanel("share_email"),
+    ]
+
     class Meta(TranslatableMixin.Meta):
         ordering = ["name"]
         verbose_name = "Callpower"
@@ -166,6 +178,11 @@ class Signup(TranslatableMixin, CTA):
         index.FilterField("ask_name"),
     ]
 
+    panels = CTA.panels + [
+        FieldPanel("campaign_id"),
+        FieldPanel("ask_name"),
+    ]
+
     class Meta(TranslatableMixin.Meta):
         ordering = ["name"]
         verbose_name = "Signup"
@@ -312,6 +329,17 @@ class Petition(TranslatableMixin, CTA):
         index.FilterField("show_comment_field"),
     ]
 
+    panels = CTA.panels + [
+        FieldPanel("campaign_id"),
+        FieldPanel("show_country_field"),
+        FieldPanel("show_postal_code_field"),
+        FieldPanel("show_comment_field"),
+        FieldPanel("share_twitter"),
+        FieldPanel("share_facebook"),
+        FieldPanel("share_email"),
+        FieldPanel("thank_you"),
+    ]
+
     class Meta(TranslatableMixin.Meta):
         ordering = ["-id"]
         verbose_name = "Petition"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -77,7 +77,7 @@
   "license": "MPL-2.0",
   "dependencies": {
     "@sentry/browser": "^7.113.0",
-    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/forms": "^0.5.9",
     "autoprefixer": "^10.4.20",
     "axe-core": "^4.10.0",
     "bootstrap": "^4.6.0",
@@ -115,7 +115,7 @@
     "browserslist": "^4.23.3",
     "chokidar-cli": "^3.0.0",
     "eslint": "^8.57.0",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
     "optipng-bin": "^9.0.0",

diff --git a/source/js/buyers-guide/analytics-events.js b/source/js/buyers-guide/analytics-events.js
@@ -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
@@ -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}`,
@@ -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}`,
@@ -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}`,
@@ -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}`,
@@ -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}`,
@@ -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}`,
@@ -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}`,
@@ -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
+  );
 }
 
 /**
@@ -120,7 +134,7 @@ function bindCheckboxCheckedGA(selector, eventData) {
     "change",
     () => {
       if (checkbox.checked) {
-        ReactGA.event(eventData);
+        window.dataLayer.push(eventData);
       }
     },
     true
@@ -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`,
@@ -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}`,
@@ -228,6 +244,7 @@ const ProductGA = {
 
       if (elements.length > 0) {
         const eventData = {
+          event: baseData.event,
           category: baseData.category,
           action: baseData.action,
           label: baseData.label,
@@ -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}`,
@@ -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}`,