Ember.js Google Tag Manager utility
// Google Tag Manager | |
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': | |
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], | |
j=d.createElement(s);j.async=true;j.src= | |
'//www.googletagmanager.com/gtm.js?id='+i;f.parentNode.insertBefore(j,f); | |
})(window,document,'script','dataLayer','GTM-ABCDEF'); | |
// End Google Tag Manager | |
App.GtmUtil = { | |
defaultEvent: { | |
event: 'trackEvent', | |
eventCategory: '', | |
eventAction: '', | |
eventLabel: '', | |
eventValue: '' | |
}, | |
defaultPageView: { | |
event: 'vpv', | |
virtualPagePath: '' | |
}, | |
createPayload: function (type, o) { | |
var data = o || {}; | |
var defaultPayload = this['default' + type]; | |
var payload = {}; | |
Object.keys(defaultPayload).forEach(function (key) { | |
payload[key] = data.hasOwnProperty(key) ? data[key] : defaultPayload[key]; | |
}); | |
return payload; | |
}, | |
trackEvent: function (o) { | |
window.dataLayer.push(this.createPayload('Event', o)); | |
}, | |
trackPageView: function (path) { | |
window.dataLayer.push(this.createPayload('PageView', { virtualPagePath: path })); | |
} | |
}; |
require('../utils/gtm-util'); | |
Ember.Application.initializer({ | |
name: 'googleTagManager', | |
initialize: function (container, application) { | |
var router = container.lookup('router:main'); | |
router.on('didTransition', function () { | |
App.GtmUtil.trackPageView(this.get('url')); | |
}); | |
} | |
}); |
// Sample usage of App.GtmUtil.trackEvent | |
require('../utils/gtm-util'); | |
App.ApplicationRoute = Ember.Route.extend({ | |
actions: { | |
openModal: function (name, model) { | |
App.GtmUtil.trackEvent({ eventCategory: 'Application', eventAction: 'openModal', eventLabel: name }); | |
this.controllerFor('modal.' + name).set('model', model); | |
return this.render('modal/' + name, { | |
into: 'application', | |
outlet: 'modal' | |
}); | |
}, | |
closeModal: function () { | |
App.GtmUtil.trackEvent({ eventCategory: 'Application', eventAction: 'closeModal' }); | |
return this.disconnectOutlet({ | |
outlet: 'modal', | |
parentView: 'application' | |
}); | |
} | |
} | |
}); |
This comment has been minimized.
This comment has been minimized.
Same for me. Thanks a lot @pwfisher ! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
this helped me a lot, thanks!