Three javascript analytics packages in Gantry 5 Joomla 5
-
-
- Harlow Pinson
- Jr. Rocketeer
- Posts: 25
- Thanks: 0
-
In Joomla 5/ Gantry 5 how do I place multiple analytics packages.
Can I just past all my three tracking package code blocks into the head section of Page Settings rather than use the confusing Atoms at all?
If I have to use Atoms here is what I assume:
I uses Google Analytics 4, Matomo Analytics 5, and the Facebook Pixel analytics so i have three code trackign javascript blocks.
Here is what I am assuming from the rahter inconsistent docs and tutorials:
1. Go to the base template, click Page Settings, scroll to the bottom and drag 3 Custom CSS/ JS Atoms and Save Page Settings.
2. Edit each atom and click + to add a Javascrpt item.
3. Name the Javascript Item, then click to enter its properties, and paste just the javascript, omitting all script tags provided by Google.
4. Apply, save, and repeat for next Custom tracker in the second and third atom.
This is confusied by their being a new "Google Analytics" Atom. I assume I do not have to use this at all?
Is my process correct? Am I missing something? - Last Edit: 6 months 2 weeks ago by Harlow Pinson.
-
-
-
- Harlow Pinson
- Jr. Rocketeer
- Posts: 25
- Thanks: 0
-
To complicate, Facebook uses two javascript code blocks.
First is the javascript tracking code.
Second is an embeded "Facebook Pixel"
How do I place these? Two CSS/ Javascript atoms?
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22234
- Thanks: 3219
- messin' with stuff
-
Things you want globally loaded, on every single page, are best kept in your Base Outline Page Settings
For content that needs to load in your <head> section use the Head Properties Custom Content box
docs.gantry.org/gantry5/configure/page-settings#head-properties
For scripts that can/should be loaded in your <body> tag you can use the Body Properties before or after boxes:
docs.gantry.org/gantry5/configure/page-settings#body-attributes
The Assets area works in a similar function and is a nice way to organize individual scripts and has a clean way of loading 3rd party external scripts. You can also set Load Priority amongst your scripts this way.
Most scripts need to load on every page so the approach of using your Base Outline and one of these 3 areas works well enough to ensure this happens, just make sure that your inheriting these sections from your other Outlines; which is the default behavior. If you do need to load non-global scripts on specific Outlines the Assets area can usually work well enough for this, just be mindful that you would no longer be inheriting your other scripts in this area from the Base Outline (once your check the box to no longer inherit) and so any changes you make to those Base Outline scripts will not be reflected/inherited automatically anymore... THIS is where the Custom CSS/JS Atom can come into play... I find that if I have an Outline that needs a new, non-global, script added, and I'm already loading global scripts from the Assets area, that it often makes sense to do it through the Custom CSS/JS Atom so I can keep inheriting everything else from the Base Outline... AND Atoms can be inherited from ANY other Outline whereas the Assets and the Head/Body properties can only inherit from the Base Outline.
Different options for different scenarios; hopefully that helps. - Last Edit: 6 months 2 weeks ago by Matt.
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
Time to create page: 0.038 seconds