Improve support for UA-, G-, GTM- tracking scripts (#440)

coderedcms/migrations/0024_analyticssettings.py

@@ -0,0 +1,28 @@
+# Generated by Django 3.2.7 on 2021-09-09 04:29
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('coderedcms', '0023_auto_20210908_1702'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='analyticssettings',
+            name='ga_g_tracking_id',
+            field=models.CharField(blank=True, help_text='Your Google Analytics 4 tracking ID (begins with "G-")', max_length=255, verbose_name='G Tracking ID'),
+        ),
+        migrations.AddField(
+            model_name='analyticssettings',
+            name='gtm_id',
+            field=models.CharField(blank=True, help_text='Begins with "GTM-"', max_length=255, verbose_name='Google Tag Manager ID'),
+        ),
+        migrations.AlterField(
+            model_name='analyticssettings',
+            name='ga_tracking_id',
+            field=models.CharField(blank=True, help_text='Your Google "Universal Analytics" tracking ID (begins with "UA-")', max_length=255, verbose_name='UA Tracking ID'),
+        ),
+    ]

coderedcms/models/wagtailsettings_models.py

@@ -7,7 +7,7 @@ Global project or developer settings should be defined in coderedcms.settings.py
 import json
 from django.db import models
 from django.utils.translation import gettext_lazy as _
-from wagtail.admin.edit_handlers import FieldPanel, MultiFieldPanel
+from wagtail.admin.edit_handlers import FieldPanel, HelpPanel, MultiFieldPanel
 from wagtail.images.edit_handlers import ImageChooserPanel
 from wagtail.contrib.settings.models import BaseSetting, register_setting
 from wagtail.images import get_image_model_string
@@ -219,14 +219,26 @@ class AnalyticsSettings(BaseSetting):
     ga_tracking_id = models.CharField(
         blank=True,
         max_length=255,
-        verbose_name=_('GA Tracking ID'),
-        help_text=_('Your Google Analytics tracking ID (begins with "UA-")'),
+        verbose_name=_('UA Tracking ID'),
+        help_text=_('Your Google "Universal Analytics" tracking ID (begins with "UA-")'),
+    )
+    ga_g_tracking_id = models.CharField(
+        blank=True,
+        max_length=255,
+        verbose_name=_('G Tracking ID'),
+        help_text=_('Your Google Analytics 4 tracking ID (begins with "G-")'),
     )
     ga_track_button_clicks = models.BooleanField(
         default=False,
         verbose_name=_('Track button clicks'),
         help_text=_('Track all button clicks using Google Analytics event tracking. Event tracking details can be specified in each button’s advanced settings options.'),  # noqa
     )
+    gtm_id = models.CharField(
+        blank=True,
+        max_length=255,
+        verbose_name=_('Google Tag Manager ID'),
+        help_text=_('Begins with "GTM-"'),
+    )
     head_scripts = MonospaceField(
         blank=True,
         null=True,
@@ -241,12 +253,29 @@ class AnalyticsSettings(BaseSetting):
     )
 
     panels = [
+        HelpPanel(
+            heading=_('Know your tracking'),
+            content=_(
+                '<h3><b>Which tracking IDs do I need?</b></h3>'
+                '<p>Before adding tracking to your site, '
+                '<a href="https://docs.coderedcorp.com/cms/how_to/add_tracking_scripts.html" '
+                'target="_blank">read about the difference between UA, G, GTM, '
+                'and other tracking IDs</a>.</p>'
+            ),
+        ),
         MultiFieldPanel(
             [
                 FieldPanel('ga_tracking_id'),
+                FieldPanel('ga_g_tracking_id'),
                 FieldPanel('ga_track_button_clicks'),
             ],
-            heading=_('Google Analytics')
+            heading=_('Google Analytics'),
+        ),
+        MultiFieldPanel(
+            [
+                FieldPanel('gtm_id'),
+            ],
+            heading=_('Google Tag Manager'),
         ),
         MultiFieldPanel(
             [

coderedcms/templates/coderedcms/pages/base.html

@@ -9,16 +9,35 @@
 <html prefix="og: http://ogp.me/ns#" lang="{{ LANGUAGE_CODE }}">
   <head>
         {% block tracking %}
-        {% if settings.coderedcms.AnalyticsSettings.ga_tracking_id %}
+        {% if settings.coderedcms.AnalyticsSettings.ga_tracking_id or settings.coderedcms.AnalyticsSettings.ga_g_tracking_id %}
             <!-- Global site tag (gtag.js) - Google Analytics -->
+            {% if settings.coderedcms.AnalyticsSettings.ga_tracking_id %}
             <script async src="https://www.googletagmanager.com/gtag/js?id={{settings.coderedcms.AnalyticsSettings.ga_tracking_id}}"></script>
+            {% else %}
+            <script async src="https://www.googletagmanager.com/gtag/js?id={{settings.coderedcms.AnalyticsSettings.ga_g_tracking_id}}"></script>
+            {% endif %}
             <script>
               cr_track_clicks = {{settings.coderedcms.AnalyticsSettings.ga_track_button_clicks|yesno:"true,false"}};
               window.dataLayer = window.dataLayer || [];
               function gtag(){dataLayer.push(arguments);}
               gtag('js', new Date());
+              // {% if settings.coderedcms.AnalyticsSettings.ga_tracking_id %}
               gtag('config', '{{settings.coderedcms.AnalyticsSettings.ga_tracking_id}}');
+              // {% endif %} {% if settings.coderedcms.AnalyticsSettings.ga_g_tracking_id %}
+              gtag('config', '{{settings.coderedcms.AnalyticsSettings.ga_g_tracking_id}}');
+              // {% endif %}
+            </script>
+        {% endif %}
+        {% if settings.coderedcms.AnalyticsSettings.gtm_id %}
+            <!-- Google Tag Manager -->
+            <script>
+              (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=
+              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+              })(window,document,'script','dataLayer','{{settings.coderedcms.AnalyticsSettings.gtm_id}}');
             </script>
+            <!-- End Google Tag Manager -->
         {% endif %}
         {% if settings.coderedcms.AnalyticsSettings.head_scripts %}
             {{settings.coderedcms.AnalyticsSettings.head_scripts|safe}}
@@ -160,6 +179,12 @@
         {% include "wagtailseo/struct_data.html" %}
 
         {% block body_tracking_scripts %}
+        {% if settings.coderedcms.AnalyticsSettings.gtm_id %}
+        <!-- Google Tag Manager (noscript) -->
+        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{settings.coderedcms.AnalyticsSettings.gtm_id}}"
+        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+        <!-- End Google Tag Manager (noscript) -->
+        {% endif %}
         {% if settings.coderedcms.AnalyticsSettings.body_scripts %}
             {{settings.coderedcms.AnalyticsSettings.body_scripts|safe}}
         {% endif %}

docs/how_to/add_tracking_scripts.rst

@@ -7,12 +7,49 @@ to the ``<head>`` and ``<body>`` of all of your web pages.
 Tracking settings are located in the Wagtail Admin dashboard under
 **Settings > Tracking**.
 
+.. warning::
+
+   While it may be tempting to add dozens of tracking scripts to your website,
+   keep in mind that **each script you add will slow your site down**
+   and will invade your visitors' privacy. Therefore we recommend to carefully
+   evaluate and choose one tracking solution that best fits your needs.
+
 
 Google Analytics
 ----------------
 
-For Google Analytics, all you need is the **GA Tracking ID**. Copy and paste this ID into the field.
-Then, if you want to track button clicks, just click the checkbox. Save and you're done!
+There are two types of Google Analytics accounts --- "Universal Analytics"
+(generally for accounts created before 2021) and "Google Analytics 4":
+
+* **Universal Analytics** account IDs begin with **UA-**
+
+* **Google Analytics 4 (GA4)** account IDs begin with **G-**
+
+* If you are using both account types, you can enter both IDs and the data will
+  populate both accounts. However, neither is "better" and using both does not
+  provide any benefit compared to using just one.
+
+.. note::
+
+   A common misconception is that Google Analytics helps boost SEO. This is not
+   true! Google Analytics tracks people who use your site so you can see
+   metrics such as: how many people viewed which pages, for how long, from what
+   location, etc. It does not provide any benefit other than giving you this
+   information.
+
+
+Google Tag Manager (GTM)
+------------------------
+
+Google Tag Manager (GTM) is a separate product from Google Analytics. GTM lets
+you add **one** script to your site. Then, from the GTM Console, you can add
+multiple other tracking scripts (Such as Google Analytics, Google Adwords,
+Google Remarketing, Facebook Pixels, Salesforce, Pardot, StatCounter, Adobe,
+etc.). GTM makes it convenient for your marketing staff to continually add and
+change the tracking tools without having to make any changes to the website.
+
+If you are using Google Tag Manager, we recommend that you remove any other
+tracking scripts from your site, and add them instead through the GTM Console.
 
 
 Other Scripts
@@ -41,10 +78,10 @@ If you have other tracking codes to add, follow these steps:
 
 .. note::
 
-    You can verify that the scripts on the web page by going to the site and inspecting the Source Code.
-    Then search for the ``<script>`` tags, either visually or by hitting ``CTRL + F`` on your keyboard
-    and searching for the code.
-    Here's how to get the Source Code if you are not sure:
+    You can verify that the scripts on the web page by going to the site and
+    inspecting the Source Code. Then search for the ``<script>`` tags, either
+    visually or by hitting ``CTRL + F`` on your keyboard and searching for the
+    code. Here's how to get the Source Code if you are not sure:
 
     * Firefox: https://developer.mozilla.org/en-US/docs/Tools/View_source
 

docs/releases/v0.22.0.rst

@@ -14,6 +14,9 @@ New features
 * Background behind site's logo shown in the Wagtail Admin now follows "Navbar
   color scheme" setting to improve appearance of dark logos.
 
+* Updated support for Google ``UA-``, ``G-``, and ``GTM-`` tracking scripts.
+  See :doc:`/how_to/add_tracking_scripts`.
+
 
 Upgrade considerations
 ----------------------