https://github.com/openmost/datalayer-sync
Syncronise your Google Analytics and Matomo dataLayers
https://github.com/openmost/datalayer-sync
datalayer google-analytics matomo
Last synced: 3 months ago
JSON representation
Syncronise your Google Analytics and Matomo dataLayers
- Host: GitHub
- URL: https://github.com/openmost/datalayer-sync
- Owner: openmost
- Created: 2023-05-12T13:52:08.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-16T14:54:56.000Z (over 1 year ago)
- Last Synced: 2025-04-04T04:27:09.673Z (about 1 year ago)
- Topics: datalayer, google-analytics, matomo
- Language: HTML
- Homepage:
- Size: 10.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Synchronize Google Tag Manager and Matomo data layers (```dataLayer``` and ```_mtm```)
> [!IMPORTANT]
> This code is now part of Matomo 5.2.0 and above ! 🥳
>
> If you want to enable this feature in your container, edit your container and activate "Actively synchronise from the Google Tag Manager data layer".
## The problem (only for Matomo < 5.2.0)
Many websites have both Google Tag Manager and Matomo Tag Manager implemented on their source code.
To get similar events on Google Analytics and Matomo, the two Tag Managers have to share a common ```dataLayer```.
Matomo is compatible with GTM data layer only with data present in ```dataLayer``` array before page load.
Every event or data pushed to the dataLayer after the page load **will not** be detected by Matomo Tag Manager.
## The solution
To keep Matomo up to date with the dataLayer content, we have to synchronize GTM ```dataLayer``` with Matomo ```_mtm```.
This code listen for every ```push()``` in Google dataLayer, pick the latest item pushed in ```dataLayer```, and push this item to ```_mtm``` data layer.
**You can copy this code and past it in a custom HTML tag triggered on every page view in Matomo Tag Manager.**
ENJOY !
```html
window.dataLayer = window.dataLayer || [];
window._mtm = window._mtm || [];
let syncDataLayer = function(array, callback) {
array.push = function(e) {
Array.prototype.push.call(array, e);
callback(array);
};
};
syncDataLayer(window.dataLayer, function(e) {
window._mtm.push(window.dataLayer[window.dataLayer.length-1]);
});
```
A demo is available in ```index.html``` file on this project, you just have to look on the console for empty ```_mtm```, click the button to push event and data, and see the magic !