Skip to content

Instantly share code, notes, and snippets.

@pwfisher
Last active April 20, 2021 19:32
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pwfisher/5fd09ec2ccab253008f9 to your computer and use it in GitHub Desktop.
Save pwfisher/5fd09ec2ccab253008f9 to your computer and use it in GitHub Desktop.
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, data) {
const defaultPayload = type === 'event' ? defaultEvent : defaultPageView
if (!data) return defaultPayload
const payload = {}
Object.keys(defaultPayload).forEach(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) {
const 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'
})
}
}
})
@rudi911
Copy link

rudi911 commented Oct 30, 2014

this helped me a lot, thanks!

@kimek
Copy link

kimek commented Mar 14, 2018

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