Vue-storefront: Adding Google Tag Manager feature

[karolbzik]

Let's add Google Tag Manager to the main template.
I prepared account with ID GTM-WGQ7T9C.

Here's official documentation for installation - https://developers.google.com/tag-manager/quickstart.

Can anyone help me with this?

[kjugi]

I've dive deep into this issue and searched something like this: https://github.com/mib200/vue-gtm Don't know if this plugin worth to implement but seems to do what we want. The question is which tags and events to trigger.

I've tried to add it on local (pushed one commit with an implement on my fork) but found one problem. In REAMDE author said we must copy/paste GTM tag in our index.html and it seems to be ok but how to call the google tag id from config here? Of course, it can be some other idea to deal with it but don't find anything

[karolbzik]

@kjugi thank you for the suggestion.

From my point of view the best would be creating an integration with already predefined GTM data layer for ehanced ecommerce for Google Analytics (then we could even skip #839 issue). The shape of the data layer is explained here https://developers.google.com/tag-manager/enhanced-ecommerce.

@pkarw @filrak WDYT about https://github.com/mib200/vue-gtm and what @kjugi and I suggested?

[pkarw]

You should create a component for this I belive please take a look at analytics extension as a reference

[talalus]

I'll try on this

[jorkvist]

Any update on this? Is it paused? I tried the code but it's failing for me. Something with the router that is passed that breaks i think. Would also be nice to get the correct DataLayer implemented on atleast products and category pages.

[talalus]

I’ll continue on this in the weekend, yes sure data layer will be implemented

[jorkvist]

@talalus thanks for that and thanks for the answer! :) 👍

[anders03]

This would be a much-appreciated function for us marketing people. Would be very exciting to see GTM working on Vue-storefront

[talalus]

merged with develop

[jsxFardin]

Is there any documentation for tag manager ?

[talalus]

@jsxFardin

1. Google Enhanced Ecommerce docs: https://developers.google.com/tag-manager/enhanced-ecommerce
2. Vue-gtm docs https://github.com/mib200/vue-gtm
   You can find current tracked events here

[jsxFardin]

@talalus
I set the googleTagManager id in local.json. but still not working.
"googleTagManager": { "id": "GTM-NXN59JK", "debug": true, "product_attributes": [ "name", "id", "sku", { "priceInclTax": "price" }, { "qty": "quantity" } ] },

[talalus]

@jsxFardin The GoogleTagManagerModule is not registered by default so you need to:

1. import it in https://github.com/DivanteLtd/vue-storefront/blob/master/src/modules/client.ts#L13
2. register it in https://github.com/DivanteLtd/vue-storefront/blob/master/src/modules/client.ts#L37