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 -->
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:
index.liquid page: (relevant code only)
(
<noscript>
and<iframe>
only required for Google Tag Manager).analytics.liquid snippet: