fix: change useScriptGoogleTagManager implementation since Third Party Capital type definition update

[azuken]

🐛 The bug

const { dataLayer } = useScriptGoogleTagManager();

onMounted(() => {
  dataLayer.push({
    event: 'xxxx',
    xxxx: 'xxxx',
  });
});

Is not working anymore because GoogleAnalyticsApi was updated on third-party-capital library (version 1.1.1, automatically fetched by nuxt/scripts with a fresh yarn lockfile):

GoogleChromeLabs/third-party-capital#52

It requires now a default DataLayer name, and this PR seems to recommend for wrappers to manage that.

To quick fix it I must do this:

const { dataLayers } = useScriptGoogleTagManager();

onMounted(() => {
  dataLayers['GTM-DataLayer'].push({
    event: 'xxxx',
    xxxx: 'xxxx',
  });
});

(cannot reproduce on Stackblitz since I cannot change dependencies myself, I tried by editing directly pnpm lockfile with no success)

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-kgzm6t?file=pages%2Findex.vue

🌈 Expected behavior

Make dataLayerName optional, or managed by wrapper?

const { dataLayer } = useScriptGoogleTagManager();

onMounted(() => {
  dataLayers.default.push({
    event: 'xxxx',
    xxxx: 'xxxx',
  });
});

ℹ️ Additional context

No response

[huang-julien]

hello 👋

this will be fixed with #176

[azuken]

Perfect 💯

[harlan-zw]

Thanks for reporting this. I'll keep the issue open until it's live just in case anyone else runs into it.