mib200 / vue-gtm

Simple implementation of Google Tag Manager in Vue.js 2.0
Apache License 2.0
242 stars 85 forks source link

Track E-commerce purchase like in GA documentation #75

Closed simplenotezy closed 4 years ago

simplenotezy commented 4 years ago

How can I send a track event, like it is described here? https://developers.google.com/analytics/devguides/collection/gtagjs/enhanced-ecommerce#measure_purchases

In my old application, I could do something like this:

gtag('event', 'purchase', {
    "transaction_id": order.id,
    "value": order.total,
    "tax": order.tax,
    "shipping": order.shipping_method,
    "items": order.products,
    "coupon": order.coupon
});

However, with this new implementation I'm not sure how to send an equivalent request

kitobelix commented 4 years ago

I've done that by doing: addToCart() { this.$gtm.trackEvent({ 'event': 'addToCart', 'ecommerce': { 'currencyCode': 'USD', 'add': { 'actionField': {'list': 'Music'}, 'products': [{ 'name': 'MusicO', 'id': '77878787', 'price': '6,99', 'brand': 'MusicO', 'category': 'Music', 'coupon': 'NA', 'dimension10': 'Video', 'dimension11': 'AppName', 'dimension12': 'Buy', 'dimension13': 'SomeOtherData', 'dimension14': 'Monthly', 'quantity': 1 }] } } }); },

And then you can call the addToCart function on your pages by doing: In Vue.js Vue.prototype.$addToCart = this.addToCart;

In pages: export default { methods: { addToCart() { this.$addToCart(); } },

mib200 commented 4 years ago

@simplenotezy were you able to get it resolved? If yes, please do let me know. I will update the documentation as well in the meanwhile. Your help will be greatly appreciated!

simplenotezy commented 4 years ago

Yes thanks, this is how I solved it:

this.$gtm.trackEvent({
    ecommerce: {
        currencyCode: 'EUR',
        purchase: {
            actionField: {
                id: '123',
                affiliation: 'The Jewellery Room - v2',
                revenue: '500',
                // tax: '0.00',
                shipping: '10',
                coupon: ''
            },
            products: []
        }
    }
});