What is Google Analytics 4?
How to add your GA4 tracking code to a Joomla website.
If you have no idea what Google Analytics is used for then you can read Google’s promotional material. While some people“Google Analytics - What is it good for?” by Brian Teeman, Joomla Community Magazine, 20 March 2023 do not feel that Google Analytics is a particularly worthwhile investment of time, I’m happy enough to use it. With the demise“As Google’s Universal Analytics comes to a close, what alternatives if any do you need?As Google’s Universal Analytics comes to a close, what alternatives if any do you need?” by Philip Walton, Joomla Community Magazine, 20 September 2022 of Google’s Universal Analytics (also known as “Google Analytics 3”)GA3 stopped collecting data effective from 1 July 2023. Google released GA4 late last year.
You can read about more ways you can use GA4 by reading these two articles:
• “GA4 Events and More!” by Louise Hawkins, Joomla Community Magazine, 20 November 2022
• “Google Analytics GA4 Reporting…” by Louise Hawkins, Joomla Community Magazine, December 2022
Assuming you understand what Google Analytics does, or what you might be able to do with it, I’ll leave it to the reader to create the GA4 property and obtain the “tracking code” that’s required for GA to collect the data from your website(s). This article is concerned with answering a question that is often asked (and, in my opinion, poorly answered), viz.
I have … the script for Google Tag Manager but can’t find where to copy it…a forum user, Joomla forum, 9-Sep-2023
I think the biggest problem people have finding the answer is because the information that I’ve found is incredibly dense and hard to read; in fact it was quite difficult for me to understand, I nearly decided to abandon Google Analytics altogether. We’ll try to make things as easy as possible; I got things working and you can too … and it won’t take you a month of Sundays to solve this problem!
How to add your GA4 tracking code to a Joomla website
If you follow Google’s installation instructionssee https://support.google.com/analytics/answer/9744165?hl=en#zippy=%2Cin-this-article%2Cinstall-manually you're supposed to “copy and paste the entire Google tag in the code of every page of your website, immediately after the <head> element”. Yes, you need to copy and paste the entire section of code that appears, beginning with:
<!-- Google tag (gtag.js) -->
and ending with
</script>
on every page where you will use it but you do not need to place this code specifically between the <head> and </head> elements on those pages. In Philip Walton’s guide:
… you can add the code needed directly to your template or via some other means [such as a third-party extension] or perhaps something like a custom module …“But I really do need Google Analytics 4, show me how to add it” by Philip Walton, Joomla Community Magazine, 20 October 2022
We’ll pause a moment to consider the implications of this advice. I’d like to make a few comments about some of the poor advice that people suggest you should do. In the example taken from the Joomla forum, someone suggested editing the template index.php file. I don’t know how many times I have written this before: never modify original source code unless (a) you know what you’re doing and (b) you’re prepared to maintain your code hacks and not ask for help if things break apart later; if you break it, you fix it. Another person suggested creating a “child template” but there’s really no need to go to all of that trouble; the solution is much easier than this and it takes a few moments of your time to do it once, do it properly and never have to worry about it again.
Another possibility is to use a third-party extension. The problem with third-party extensions is that they’re (a) not always free and (b) not necessarily compatible with GA4. There’s a likelihood that a third-party extension may not work and, if you paid for it, you’ve wasted your money. I haven’t used any third-party extension to add GA tracking code on my websites and, in my opinion, third-party extensions may be overkill for what you need.
As we’ve seen, there are three approaches to installing GA4’S tracking code: (1) hack the source code; (2) install a third-party extension; or (3) use a custom module. This article will show you how to use a custom module to add the GA4 tracking code.
Create a custom module to add the GA4 tracking code
Before you create a custom module, it’s important to say a few words about “prohibited HTML elements”; the <script> tag is, by default, a “prohibited element” if you use a WYSIWYG editor. The first thing you need to do is to allow your editor to let you use <script> tags. If you use a raw editor you should be able to write the custom module without having to allow “prohibited” HTML elements.
To allow TinyMCE to let you save a custom module with <script> tags, see https://support.ecwid.com/hc/en-us/articles/207807825-Adding-Javascript-code-to-Custom-HTML-modules-in-Joomla. To allow JCE Editor to let you save a custom module with <script> tags, see https://www.joomlacontenteditor.net/support/faq/editor/scripts-removed-on-saving; click here to see a screenshot of the JCE settings I recommend.
A screenshot of the completed custom module is shown at right (click to enlarge it). Here are the steps to create your custom module.
- Go to System » (Manage) Site Modules » (click) New
- Select the Custom type.
- For steps 4 to 9 below, use the Module tab settings.
- Give your module a Title. I suggest “Site Analytics” is a good title but you can choose whatever you like.
- Set Title = Hide
- Set Position = Topbar. If you are using a different template to Cassiopeia, you can choose another template position; it’s not vital what position you use but it’s good to have your custom module run the Javascript as early as possible when the page loads.
- Set Status = Published
- Make sure are looking at the Code view; if you’re using TinyMCE you need to "toggle" to see the code view and if you are using JCE Editor the code view is one of the tabs. If you’re using CodeMirror or No Editor then you will be looking at the code view.
- Paste the GA4 tracking code.
- For the following step, use the Menu Assignment tab.
- Set Module Assignment = On all pages
- Save the module.
You can check if your changes were effective by going to the frontend of your website and inspect the source code.
