From 4cb0ef523ba481fc96d3e8bef806c8e02dcfa80c Mon Sep 17 00:00:00 2001
From: Nathan Barrett <30009669+nathan-barrett@users.noreply.github.com>
Date: Wed, 4 Jan 2023 14:04:01 -0600
Subject: [PATCH] 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        |  3 +++
 .../pocket/includes/google-analytics.html        | 16 ++++++++++++++++
 bedrock/settings/__init__.py                     |  6 +++++-
 bedrock/settings/base.py                         |  3 ++-
 gcp/bedrock-demos/cloudrun/pocket-demo.env.yaml  |  1 +
 5 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 bedrock/pocket/templates/pocket/includes/google-analytics.html

diff --git a/bedrock/pocket/templates/pocket/base.html b/bedrock/pocket/templates/pocket/base.html
index bc7e852115..b08f7bbdcc 100644
--- a/bedrock/pocket/templates/pocket/base.html
+++ b/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  %}
 
diff --git a/bedrock/pocket/templates/pocket/includes/google-analytics.html b/bedrock/pocket/templates/pocket/includes/google-analytics.html
new file mode 100644
index 0000000000..e1a3d4816a
--- /dev/null
+++ b/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 %}
diff --git a/bedrock/settings/__init__.py b/bedrock/settings/__init__.py
index 92cf9c28c4..a4849980ef 100644
--- a/bedrock/settings/__init__.py
+++ b/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",
diff --git a/bedrock/settings/base.py b/bedrock/settings/base.py
index 1496575b82..50a59bbbec 100644
--- a/bedrock/settings/base.py
+++ b/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="")
diff --git a/gcp/bedrock-demos/cloudrun/pocket-demo.env.yaml b/gcp/bedrock-demos/cloudrun/pocket-demo.env.yaml
index 50371c45de..847b12f4f0 100644
--- a/gcp/bedrock-demos/cloudrun/pocket-demo.env.yaml
+++ b/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"