V1

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

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);
+    }
+  }
+}

app/services/gtm.js

@@ -0,0 +1 @@
+export { default } from 'ember-gtm/services/gtm';

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 `<script>(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),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','${appId}');</script>`;
+    } else if (type === 'body' && appId) {
+      return `<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=${appId}"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>`
+    }
+  }
 };

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",

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
+  });
+});