Add GA4 to pocket pages (#12433)

* Add GA4 to pocket pages

* update csp

* Add GTM ID to settings

* PR Revisions

bedrock/pocket/templates/pocket/base.html

@@ -35,6 +35,9 @@
         function OptanonWrapper() {}
       </script>
       <!-- end OneTrust Cookies Consent Notice -->
+      {% block google_analytics %}
+        {% include 'pocket/includes/google-analytics.html' %}
+      {% endblock %}
 
     {% block pocket_css %}{% endblock  %}
 

bedrock/pocket/templates/pocket/includes/google-analytics.html

@@ -0,0 +1,16 @@
+{#
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+{% if settings.GTM_CONTAINER_ID %}
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ settings.GTM_CONTAINER_ID }}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '{{ settings.GTM_CONTAINER_ID }}');
+</script>
+{% endif %}

bedrock/settings/__init__.py

@@ -120,6 +120,7 @@ if IS_POCKET_MODE:
         # blocked without unsafe-eval. Find a way to remove that.
         "www.mozilla.org",
         "'unsafe-eval'",
+        "www.googletagmanager.com",
         "www.google-analytics.com",
         "cdn.cookielaw.org",
         "assets.getpocket.com",  # allow Pocket Snowplow analytics
@@ -128,8 +129,11 @@ if IS_POCKET_MODE:
         "'unsafe-inline'",
         "www.mozilla.org",
     ]
-    _csp_child_src = []
+    _csp_child_src = [
+        "www.googletagmanager.com",
+    ]
     _csp_connect_src = [
+        "www.googletagmanager.com",
         "www.google-analytics.com",
         "o1069899.sentry.io",
         "o1069899.ingest.sentry.io",

bedrock/settings/base.py

@@ -1183,7 +1183,8 @@ PASSWORD_HASHERS = ["django.contrib.auth.hashers.PBKDF2PasswordHasher"]
 ADMINS = MANAGERS = config("ADMINS", parser=json.loads, default="[]")
 
 GA_ACCOUNT_CODE = ""  # DELETE ME: Deprecated?
-GTM_CONTAINER_ID = config("GTM_CONTAINER_ID", default="")  # NB: Not used in all Bedrock modes (Mozorg only).
+GTM_CONTAINER_ID = config("GTM_CONTAINER_ID", default="")  # NB: Will be used in both modes (bedrock and pocket).
+# Pocket mode will be running both GA UA and GA4 for a while going forward
 GOOGLE_ANALYTICS_ID = config("GOOGLE_ANALYTICS_ID", default="")  # NB: Not used in all Bedrock modes (Pocket only).
 
 GMAP_API_KEY = config("GMAP_API_KEY", default="")

gcp/bedrock-demos/cloudrun/pocket-demo.env.yaml

@@ -13,6 +13,7 @@ DB_DOWNLOAD_IGNORE_GIT: "True"
 DEBUG: "False"
 DEV: "True"
 GOOGLE_ANALYTICS_ID: "UA-370613-9"
+GTM_CONTAINER_ID: "G-NFR9Y40GD3"
 LOG_LEVEL: INFO
 PROD_DETAILS_STORAGE: product_details.storage.PDDatabaseStorage
 RUN_SUPERVISOR: "True"