diff --git a/README.md b/README.md index 6d41362..7a52853 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,7 @@ ember-gtm ============================================================================== -[Short description of the addon.] - +Ember addon for integrating Google Tag Manager Compatibility ------------------------------------------------------------------------------ @@ -23,7 +22,27 @@ ember install ember-gtm Usage ------------------------------------------------------------------------------ -[Longer description of how to use the addon in apps.] +All that's required is setting the GTM key in your `config/environment.js` file. +```js +// config/environment.js + +ENV['ember-gtm'] = { + appId: '[YOUR_APP_ID]' +}; +``` + +Then you can use the `gtm` service freely. +```js +@service gtm; + +@action +someAction() { + const data = { + something: "for the dataLayer" + }; + this.gtm.trackGTM(data); +} +``` Contributing diff --git a/addon/services/gtm.js b/addon/services/gtm.js new file mode 100644 index 0000000..30dbcf0 --- /dev/null +++ b/addon/services/gtm.js @@ -0,0 +1,13 @@ +import Service from '@ember/service'; + +export default class GtmService extends Service { + _pageHasGTM() { + return window.dataLayer && typeof window.dataLayer === 'object'; + } + + trackGTM(data) { + if (this._pageHasGTM()) { + window.dataLayer.push(data); + } + } +} diff --git a/app/services/gtm.js b/app/services/gtm.js new file mode 100644 index 0000000..b5b88c8 --- /dev/null +++ b/app/services/gtm.js @@ -0,0 +1 @@ +export { default } from 'ember-gtm/services/gtm'; diff --git a/index.js b/index.js index 2e1d1d8..f580a37 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,20 @@ 'use strict'; module.exports = { - name: require('./package').name + name: require('./package').name, + + contentFor: function(type, config) { + const addonConfig = config['ember-gtm']; + const appId = addonConfig ? addonConfig.appId : null; + if (type === 'head' && appId) { + return ``; + } else if (type === 'body' && appId) { + return `` + } + } }; diff --git a/package.json b/package.json index 1833a09..5b82373 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,11 @@ { "name": "ember-gtm", - "version": "0.0.0", - "description": "The default blueprint for ember-cli addons.", + "version": "1.0.0", + "description": "Ember addon for integrating Google Tag Manager", "keywords": [ - "ember-addon" + "ember-addon", + "gtm", + "ember" ], "repository": "", "license": "MIT", diff --git a/tests/unit/services/gtm-test.js b/tests/unit/services/gtm-test.js new file mode 100644 index 0000000..f82fa99 --- /dev/null +++ b/tests/unit/services/gtm-test.js @@ -0,0 +1,35 @@ +import { module, test } from 'qunit'; +import { setupTest } from 'ember-qunit'; + +class FakeDataLayer { + items = []; + + push(item) { + this.items.push(item); + } +} + +module('Unit | Service | gtm', function(hooks) { + setupTest(hooks); + + test('it exists', function(assert) { + let service = this.owner.lookup('service:gtm'); + assert.ok(service); + }); + + test('it only runs if the page has GTM', function(assert) { + const someString = 'string'; + window.dataLayer = someString; // wrong type of object. + let service = this.owner.lookup('service:gtm'); + + const data = { stuff: 'things' }; + + service.trackGTM(data); + assert.equal(window.dataLayer, someString); // didn't push + + window.dataLayer = new FakeDataLayer(); + + service.trackGTM(data); + assert.equal(window.dataLayer.items[0], data); // pushed + }); +});