react-gtm-module not posting the event params

Question

I'm using Google Tag Manager to handle a Facebook Pixel.

That pixel should get fired through a Custom Event with custom params: { make, model } and custom conditions: { make equals ford, model equals focus }.

I have two basic implementations (each of them on its own project).

On Project 1 I'm using JS Vanilla code and integrating GTM code as they recommend (updating head/body).

Then, when I call:

dataLayer.push({
  event: 'PageViewEvent',
  make: 'ford',
  model: 'focus',
});

The Trigger gets activated properly when the conditions match → Success.

On Project 2 I'm using NPM package: react-gtm-module.

In order to use it I first initialize it with:

import TagManager from "react-gtm-module";

// ...

const tagManagerArgs = {
  'gtmId': gtmId,
  dataLayer: {
    'js': new Date(),
    'event': 'Initialize'
  },
  dataLayerName: 'MyCarDataLayer'
}

TagManager.initialize(tagManagerArgs);

and then I try to activate the trigger with:

import TagManager from "react-gtm-module";

// ...

const tagManagerArgs = {
  'gtmId': gtmId ,
  dataLayer: {
      'js': new Date(), // current date time,
      event: 'PageViewEvent',
      make: 'ford',
      model: 'focus',
  },
  dataLayerName: 'MyCarDataLayer' // must match the name specified in the TagManager.initialize() call
}

TagManager.dataLayer(tagManagerArgs);

but this time the trigger doesn't get activated.

When I check the status of the trigger that should get activated, I get the following:

where I can see that even the event name didn't match. It got as event name the current route but I specified as event: PageViewEvent.

On both examples I was using the same parameters. Then, I think I'm not using the NPM package: react-gtm-module properly.

Could you please, help me with this?

Thanks in advance!

Did you ever figure this out? I ran into a similar problem – Alex von Brandenfels Sep 28 '21 at 01:15 — Alex von Brandenfels, Sep 28 '21 at 01:15

score 2 · Answer 1 · answered Mar 24 '22 at 20:23

try this

import TagManager from "react-gtm-module";

// ...
TagManager.initialize({'gtmId': gtmId})

const tagManagerArgs = {
  dataLayer: {
      'js': new Date(), // current date time,
      event: 'PageViewEvent',
      make: 'ford',
      model: 'focus',
  }
}

TagManager.dataLayer(tagManagerArgs);

this answer is referenced from github issue https://github.com/alinemorelli/react-gtm/issues/28

scroll to the button, think they did some updates, so the answer from the top doesn't work anymore

react-gtm-module not posting the event params

1 Answers1