matomo-org / tag-manager

Free Open Source Matomo Tag Manager - A simple way to manage and maintain all of your (third-party) tags on your website.
https://matomo.org
GNU General Public License v3.0
169 stars 57 forks source link

Google Tag Manager type of dataLayer doesn't triggers in Matomo Tag Manager #304

Open KevMou opened 3 years ago

KevMou commented 3 years ago

Hello,

I have a problem with the detection of Google Tag Manager dataLayer in Matomo. The detection work when the dataLayer is sent when a page is loaded but when the dataLayer is sent on an interaction like a click on a button the dataLayer is not detected by Matomo Tag Manager. The dataLayers are based on the Google Tag Manager type For example window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'test' });

Is it a bug or the way it works with GTM dataLayers in Matomo Tag Manager ? Do you have a solution for Matomo Tag Manager to detect GTM dataLayers when they are sent after the page load ?

We are operating a migration from GA to Matomo and we want to avoid changing the dataLayers on the website.

Thanks in advance.

tsteur commented 3 years ago

Hi @KevMou thanks for creating this issue. This is indeed expected behaviour currently and documented in https://developer.matomo.org/guides/tagmanager/datalayer#migration-from-google-tag-manager

I will keep this issue open though in case we can manage in the future to listen to these data layer pushes and update our data layer.

brangebrange commented 3 years ago

Hi, We are also in a project that are in the migration from GTM/GA to MTM/Matomo. We have a lot of custom dataLayers on the website and it would be very nice to avoid changing these.

We are also using CookiePro from OneTrust and their functionality is also based on updating the dataLayer if the user is changing the consent of the website.

Is there a way to make some custom code that will push changes in dataLayer and push it to the Matomo data layer?

Thanks!

niklasternstedt commented 2 years ago

@tsteur what is the status on this? Is there a workaround we can use instead?

tsteur commented 2 years ago

Hi @niklasternstedt

I don't really have a workaround yet. I will post some untested snippet that could potentially do something like that. However, I don't know if there's any event in GTM that let's you know if GTM (or its datalayer) is loaded or not. Since GTM is loaded async we wouldn't know when GTM replaces the dataLayer variable with their own (if they do at all).

Generally we could investigate in the future to offer an option to forward all GTM dataLayer calls to Matomo. We can't enable it by default as it would cause issues for existing implementations where people might use GTM and MTM in one page or where they still have the previous dataLayer in their code.

function setUpForwardDataLayer() {
  // this would forward any call from GTM dataLayer to our own dataLayer (not tested)
  if (window.dataLayer && 'function' === window.dataLayer.push) {
    var oldMethodBackup = window.dataLayer.push;
    window._mtm = window._mtm || [];

    try {
      if (oldMethodBackup.toString && oldMethodBackup.toString().indexOf('function replaceMe') === 0) {
        // the method is already replaced, to not replace it again and again and again
        return;
      }
    } catch (e) {}

    function replaceMe() {
      oldMethodBackup.apply(window.dataLayer, [].slice.call(arguments, 0));
      window._mtm.push.apply(window._mtm, [].slice.call(arguments, 0));
    };

    window.dataLayer.push = replaceMe;
  }
}

window.matomoTagManagerAsyncInit = function (TagManager) {
  TagManager.dataLayer.on(function (event) {
    if (event['mtm.mtmScriptLoadedTime']) {
        setUpForwardDataLayer(); 
    }
  });
}

window.OnGTMDataLayerReady = setUpForwardDataLayer; // I don't know if GTM has something like this... a callback when GTM or its datalayer is loaded.
niklasternstedt commented 2 years ago

@tsteur alright, thanks for the update. Why do it work with pageviews toady but not with an interaction like click on a button?

Maybe you can find something useful here: https://developers.google.com/tag-platform/tag-manager/web/datalayer

tsteur commented 2 years ago

Why do it work with pageviews toady but not with an interaction like click on a button?

@niklasternstedt I'm not quite sure what you mean there?

tsteur commented 2 years ago

Here's a post partially related to this issue: https://hume.dev/articles/forward-datalayer-events/ (not tested)

ulcuber commented 2 years ago

Here's a post partially related to this issue: https://hume.dev/articles/forward-datalayer-events/ (not tested)

That one uses Proxy which will not work in old browsers: https://caniuse.com/?search=Proxy

Matomo setMethodWrapIfNeeded util almost the same as example above but not suitable for this since it can wrap itself and applies old and new method in the same context

Chardonneaur commented 1 year ago

@tsteur seems like @ronan-hello found a solution with this script:

ronan-hello commented 1 year ago

@tsteur seems like @ronan-hello found a solution with this script:

Here is the Github repo : https://github.com/openmost/datalayer-sync

9joshua commented 4 months ago

Not having the GTM dataLayer events automatically pushed to the MTM data layer creates a lot of unnecessary workarounds for some users. Especially those who are trying to respond to real-time consent state changes with their CMPs, which are more common now days. Having the option for this in the 'Matomo Configuration' variable might remedy the issue with existing sites where this behaviour might cause issues.

9joshua commented 1 month ago

Another customer experienced frustration with the default behaviour. Many users come from GA where new events fired to the GTM dataLayer are detected by GTM. When migrating to MTM they expect the same functionality but end up having to hack MTM to detect the same events in real-time. I really think MTM should consume dataLayer events to the MTM data layer in real-time because the pros heavily outweigh the cons. Have seen this issue many times with other customer as well.

AltamashShaikh commented 1 month ago

We can think of adding a listener on dataLayer and push the same to mtm so that its easier to test/migrate from GTM.

ronan-hello commented 1 month ago

Hi,

If you want, here is the code to sync dataLayer to _mtm, may this code be in the next Matomo Core release ? https://github.com/openmost/datalayer-sync

Chardonneaur commented 2 weeks ago

@Stan-vw do you know if this sync, as introduced by @ronan-hello will be part of the next release?

Stan-vw commented 2 weeks ago

it's currently planned in a few weeks, so not yet in the next release. Hopefully the one after that 👍