locomotivecms / steam

The rendering stack used by both Wagon and Station (new name of the engine). It includes the rack stack and the liquid drops/filters/tags.
MIT License
38 stars 59 forks source link

Google Analytics Universal Tag is now deprecated #231

Open greyskin opened 1 year ago

greyskin commented 1 year ago

Google Analytics 4 has replaced Universal Analytics as of 1 July 2023. Consequently, Locomotive CMS' {% google_analytics %} tag, (which uses Universal Analytics) is now deprecated. I have removed the reference to it from the official documentation.


For anyone wanting a solution for the new Google Analytics 4, what we have done is create a Google namespace in the metafields_schema file to allow our customers to use either Google Tag Manager or Global Site Tag. Code snippets as follows:

metafields_schema.yml:

google:
  label: Google
  fields:

    analytics_type:
      label: Analytics Type
      type: select
      select_options:
        global_site_tag: Global Site Tag (gtag.js)
        tag_manager: Tag Manager
      hint: "Select analytics type."

    tags:
      label: Tag(s)
      type: string
      hint: Enter a single analytics tag (a list of comma-separated tags is also accepted if Global Site Tag is selected above).

index.liquid page: (relevant code only)

    <head>
        {% include 'analytics' %}
    </head>

    <body>

        {% if site.metafields.google.analytics_type == 'tag_manager' %}

            <!--    Start Google Tag Manager (noscript) -->
            <noscript>
                <iframe src="https://www.googletagmanager.com/ns.html?id={{ site.metafields.google.tags }}" height="0" width="0" style="display:none;visibility:hidden"></iframe>
            </noscript>
            <!--    End Google Tag Manager (noscript) -->
        {% endif %}

(<noscript> and <iframe> only required for Google Tag Manager).

analytics.liquid snippet:

{% comment %}{% raw %}
    To use this snippet, add {% include 'analytics' %} in the page/template
{% endraw %}{% endcomment %}

<!-- Start ANALYTICS -->
{% if site.metafields.google.analytics_type == 'global_site_tag' %}

    {% assign analyticsTags = site.metafields.google.tags | split: ',' %}

    {% capture analyticsTagsJS %}
        {% for analyticsTag in analyticsTags %}
            gtag('config','{{ analyticsTag }}');
        {% endfor %}
    {% endcapture %}

    {% comment %}   GLOBAL SITE TAG (gtag.js) --- {% endcomment %}
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ analyticsTags | first }}"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        {{ analyticsTagsJS }}
    </script>

{% elsif site.metafields.google.analytics_type == 'tag_manager' %}

    {% comment %}   GOOGLE TAG MANAGER --- {% endcomment %}
    <script>
        window.dataLayer = window.dataLayer || [];
    </script>

    <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','{{ site.metafields.google.tags }}');
    </script>

{% endif %}
<!-- End ANALYTICS -->