alinemorelli / react-gtm

React Google Tag Manager
MIT License
658 stars 140 forks source link

eventCallback not supported #102

Open iskrenvankov opened 2 years ago

iskrenvankov commented 2 years ago

Hi,

I am trying to execute some code only after the data layer event has been successfully pushed. The usual way to do this with the plain js gtm library is to use the eventCallback and eventTimeout properties. For instance, checkout this SO answer here: https://stackoverflow.com/a/38976722/1507558 which shows this snippet:

window.dataLayer.push({
  'event' : 'processLink',
  'eventCallback' : function() {
    window.location = targetUrl
  },
  'eventTimeout' : 2000
});

Using react-gtm now, I can't find a way to use the eventCallback property. If I pass a function, it gets dropped and is not present in the dataLayer event object passed.

Could you advise on how to solve this situation using react-gtm?

kodiekenta commented 2 years ago

what npm version did you use to install the package

iskrenvankov commented 2 years ago

what npm version did you use to install the package

npm version 7.11.2

github0copilot commented 6 months ago

1+

github0copilot commented 6 months ago

@iskrenvankov as i read the code base there is a workaround to that (but you should use ts-ignore flag if you are using type script)

https://github.com/alinemorelli/react-gtm/blob/b1257405a82e900c174032a773a8ba70a8628081/src/TagManager.js#L46

as we can see in this line you should add it to dataLayer object, like this:

TagManager.dataLayer({
      dataLayer: {
        event: "event",
        eventCallback : function() {
          window.location = targetUrl;
        },
        eventTimeout: 2000
      },
      dataLayerName: "name",
 });