Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Google Analytics Universal Tag is now deprecated #231

Open
greyskin opened this issue Jul 25, 2023 · 0 comments
Open

Google Analytics Universal Tag is now deprecated #231

greyskin opened this issue Jul 25, 2023 · 0 comments

Comments

@greyskin
Copy link

greyskin commented Jul 25, 2023

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 -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant