How to add content_group

[vazgen]

Request / Idea

Is it possible to add countent_group to the request? So foe example I can add different groups per page.

thank you
...

Additional Context

...

[Shinigami92]

Maybe with additionalEventData
https://github.com/gtm-support/core/blob/9391b2d691dcff0dd75446c4ddbce3b916e60652/src/gtm-support.ts#L174

Or with ...rest
https://github.com/gtm-support/core/blob/9391b2d691dcff0dd75446c4ddbce3b916e60652/src/gtm-support.ts#L220

[vazgen]

this data should be sent on the page_view event. I am trying to do it in Nuxt app. I'm not sure how to exactly to implement it. I tried different ways like adding page hooks, but it did not work.
for example I did

export default defineNuxtConfig({
...
hooks: {
    'pages:extend': (pages) => {
      pages.map((page) => {
        Object.assign(page, { meta: { gtmAdditionalEventData: { 'section_of_website': 'course' } } });
      });

      console.log(pages);
    }
  },
})

it adds gtmAdditionalEventData to the routes but it does not send section_of_website to GTM.

[vazgen]

Another try is

import { createGtm } from "@gtm-support/vue-gtm";

export default defineNuxtPlugin((nuxtApp) => {
  const router = useRouter();

  router.getRoutes().map((route) => {
    route.meta = { gtmAdditionalEventData: { routeCategory: 'INFO' } , additionalEventData: 'a', gtm: 'MyCustomValue' };
  });

  console.log(router.getRoutes());

  const runtimeConfig = useRuntimeConfig().public;
  nuxtApp.vueApp.use(createGtm({
    id: runtimeConfig.gtm_id,
    defer: false, // Script can be set to `defer` to speed up page load at the cost of less accurate results (in case visitor leaves before script is loaded, which is unlikely but possible). Defaults to false, so the script is loaded `async` by default
    compatibility: false, // Will add `async` and `defer` to the script tag to not block requests for old browsers that do not support `async`
    enabled: runtimeConfig.gtm_enable, // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
    debug: runtimeConfig.gtm_debug, // Whether display console logs debugs (optional)
    loadScript: true, // Whether to load the GTM Script (Helpful if you are including GTM manually, but need the dataLayer functionality in your components) (optional)
    vueRouter: router,
    trackOnNextTick: false, // Whether call trackView in Vue.nextTick
  }));
});

gtm: 'MyCustomValue' works fine, but I gtmAdditionalEventData or additionalEventData do not work.

[Shinigami92]

Try have a look into

vue-gtm/src/index.ts

Lines 163 to 181 in 4536411

	const additionalEventData: Record<string, any> = {
	...(await deriveAdditionalEventData(to, from)),
	...(to.meta?.gtmAdditionalEventData as Record<string, any>),
	};
	const baseUrl: string = vueRouter.options?.history?.base ?? '';
	let fullUrl: string = baseUrl;
	if (!fullUrl.endsWith('/')) {
	fullUrl += '/';
	}
	fullUrl += to.fullPath.startsWith('/')
	? to.fullPath.substring(1)
	: to.fullPath;
	if (trackOnNextTick) {
	void nextTick(() => {
	gtmPlugin?.trackView(name, fullUrl, additionalEventData);
	});
	} else {
	gtmPlugin?.trackView(name, fullUrl, additionalEventData);

Maybe it helps somehow
The code isn't that big 🙂 so just look around a bit and hopefully you can find something out
Maybe we need to fix something or add docs

[vazgen]

After debugging a little bit I released that it works fine. The issue is that it does not log the additional data to console due to

console.log(
        `[GTM-Support${trigger ? "" : "(disabled)"}]: Dispatching TrackView`,
        { screenName, path }
      );

[Shinigami92]

You are satisfied or you want to submit a patch?