Configure how `useTrackEvent()` and `gtag()` push data to data layer

[bjarnef]

Describe the feature

When using useTrackEvent() or gtag() it push the following object to data layer. Not sure the reason behind this, but is it possible to configure?

So instead of this:

{
   "0": "event",
   "1": "show_contact_info",
   "2": {
      "email": "mail@mail.dk",
      "phone": "12 34 56 78"
   }
}

the this format:

{
   "event": "show_contact_info",
   "email": "mail@mail.dk",
   "phone": "12 34 56 78"
}

Additional information

• [ ] Would you be willing to help implement this feature?
• [ ] Can you think of other implementations of this feature?

Final checks

• [X] Check existing issues.

[johannschopplich]

Hi there, I'm not sure, what you mean. The gtag function exposed by useGtag accepts the same arguments as the gtag global function from the official Google Tag library. So you can use this (if you're using TypeScript, you will even get type completion for the available params):

gtag('event', 'show_contact_info', {
  email: 'mail@mail.dk',
  phone: '12 34 56 78',
})

[bjarnef]

Hi @johannschopplich

I tried both approaches, but in both cases dataLayer checker shows the following.

comparing to e.g Sleeknote or similar and traditional push to data layer in JS:

window.dataLayer = window.dataLayer || [];

window.dataLayer.push(obj);

[bjarnef]

3 examples:

declare global {
    interface Window { dataLayer: any; }
}

window.dataLayer = window.dataLayer || [];

const onContactClick = () => {

  const contactPerson = {
    email: "mail@mail.dk",
    phone: "12 34 56 78"
  };

  const { gtag } = useGtag();

  gtag('event', 'show_contact_info', contactPerson)

  useTrackEvent('show_contact_info', contactPerson)

  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'show_contact_info',
    contactPerson
  });

}

gtag()

useTrackEvent()

window.dataLayer

[johannschopplich]

Thanks for the examples! But that seems to be a different approach. We use this to push the event args directly to the gtag function from Google.

https://github.com/johannschopplich/nuxt-gtag/blob/faeaf1ed1dbcdd63d7c9c994d45705049e7578e7/src/runtime/composables/useTrackEvent.ts#L8

Pushing to window.dataLayer results in a different behaviour, because the official gtag functions pushes the arguments list of the input params, not a plain object:

// Taken from official Google Tag snippet
function gtag(){dataLayer.push(arguments);}

… Which we use here the same way to keep the same Gtag behavior: https://github.com/johannschopplich/nuxt-gtag/blob/faeaf1ed1dbcdd63d7c9c994d45705049e7578e7/src/runtime/gtag.ts#L6

You could write your own wrapper to handle data pushing, but for the library, I think sticking to the official implementation is best, don't you think? Chaning this core feature from arguments to the plain object would break many applications, because some Google services require the arguments type, which is not a plain object.

[bjarnef]

Okay, maybe it has change a bit since as this claims that there is no difference between gtag() and dataLayer.push(): https://stackoverflow.com/a/69916520

One key distinction is that Gtag.js supports google tags only whereas Google Tag Manager supports all 3rd party tags in addition to google’s tags.

https://googleanalytics4.co/implementation/google-tag-manager-vs-google-tag-gtag-js/

[johannschopplich]

Yeah, there seems to be a difference. For now, you can write a custom composable to fit your use-case.

Closing this, as not intended. Hope the issue helped tho!