ember-tracker - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

addon/mixins/google-analytics-route.js

 import Ember from 'ember';
+import { getCurrentRoute } from 'ember-tracker/-privates/utils';
 
 const {
-	getOwner,
+	inject: {
+		service,
+	},
+	on,
 	typeOf,
@@ -15,3 +19,3 @@ } = Ember;
 	 */
-	_ga: Ember.inject.service('google-analytics'),
+	_ga: service('google-analytics'),
 	
@@ -21,34 +25,36 @@ /**
 	 * @public
+	 * @observes {didTransition}
 	 * @memberOf {GoogleAnalyticsRoute}
 	 * @type {Function}
 	 */
-	_emberTrackerPageView: Ember.on('didTransition', handlePageView),
-});
+	_etPageView: on('didTransition', function() {
+		const routeName = this.get('currentRouteName'),
+			route = this._etGetCurrentRoute(routeName),
+			ga = this.get('_ga');
 
-/**
- * Observes and sends our page view anytime a route transitions.
- * @public
- * @memberOf {GoogleAnalyticsRoute}
- * @return {undefined}
- */
-function handlePageView() {
-	const owner = getOwner(this),
-		routeName = this.get('currentRouteName'),
-		route = owner.lookup(`route:${routeName}`),
-		ga = this.get('_ga');
+		let page = this.get('url'),
+			title = getTitle(route);
 
-	let page = this.get('url'),
-		title = getTitle(route);
+		if (typeOf(route.beforeAnalyticsPageview) === 'function') {
+			const changes = route.beforeAnalyticsPageview(ga);
 
-	if (typeOf(route.beforeAnalyticsPageview) === 'function') {
-		const changes = route.beforeAnalyticsPageview(ga);
-
-		if (changes) {
-			page = changes.page || page;
-			title = changes.title || title;
+			if (changes) {
+				page = changes.page || page;
+				title = changes.title || title;
+			}
 		}
-	}
 
-	ga.pageview(page, title);
-}
+		ga.pageview(page, title);
+	}),
+	
+	/**
+	 * Returns the route required.
+	 * @private
+	 * @memberOf {GoogleAnalyticsRoute}
+	 * @return {Route}
+	 */
+	_etGetCurrentRoute(routeName) {
+		return getCurrentRoute(this, routeName);
+	},
+});
 
@@ -55,0 +61,0 @@ /**

addon/mixins/tealium-route.js

 import Ember from 'ember';
+import { getCurrentRoute, mergeObjects } from 'ember-tracker/-privates/utils';
 
-const DEFAULT_VIEW = {
+const {
+	getWithDefault,
+} = Ember;
+
+export const DEFAULT_VIEW = {
 	customerId: null,
-	domain: getDomain(),
+	domain: getWithDefault((window || {}), 'location.hostname', ''),
 	order_currency: 'USD',
@@ -10,6 +15,8 @@ page_type: 'home',
 
+const {
+	run,
+	typeOf,
+} = Ember;
+
 export default Ember.Mixin.create({
-	_utag: null,
-	_hasUtag: Ember.computed.bool('_utag'),
-
 	/**
@@ -23,8 +30,44 @@ * Sets the utag.
 	init() {
+		this.setProperties({
+			_etLastView: null,
+			_tealium: null,
+		});
+
 		this._super(...arguments);
-		if (window && window.utag) {
-			this.set('_utag', window.utag);
+		this._etCheckForUtag();
+	},
+
+	/**
+	 * Checks for the utag param on the window and sets it. if there was a previous call to transition, send it.
+	 * @private
+	 * @memberOf {TealiumRoute}
+   * @return {undefined}
+   */
+	_etCheckForUtag() {
+		run(() => {
+			this.set('_tealium', window && window.utag);
+		});
+
+		if (this.get('_tealium')) {
+			const lastView = this.get('_etLastView');
+			if (lastView) {
+				this.get('_tealium').view(lastView);
+			}
+			return;
 		}
+
+		// Run this later if they are using onLoad instead of inserting immediately
+		run.later(this, '_etCheckForUtag', 500);
 	},
 
+  /**
+   * Returns the route required.
+   * @private
+   * @memberOf {TealiumRoute}
+   * @return {Route}
+   */
+	_etGetCurrentRoute(routeName) {
+		return getCurrentRoute(this, routeName);
+	},
+
 	/**
@@ -37,29 +80,23 @@ * Watches the transition event and sends a new view to Tealium.
 	 */
-	_emberTrackerTealium: Ember.on('didTransition', function() {
-		if (!this.get('_hasUtag')) {
-			return;
-		}
-
+	_etTealium: Ember.on('didTransition', function() {
 		const routeName = this.get('currentRouteName'),
-			route = Ember.getOwner(this).lookup(`route:${routeName}`),
-			utag = this.get('_tealium');
+			route = this._etGetCurrentRoute(routeName),
+			hasTealiumFn = typeOf(route.getTealiumView) === 'function',
+			utag = this.get('_tealium'),
+			currView = {};
 
-		const hasTealiumFn = Ember.typeOf(route.getTealiumView) === 'function';
 		Ember.assert(hasTealiumFn, `${routeName} route doesn't have a "getTealiumView" function`);
 
+		mergeObjects(currView, DEFAULT_VIEW);
+
 		if (hasTealiumFn) {
-			utag.view(Ember.assign({}, DEFAULT_VIEW, route.getTealiumView()));
+			mergeObjects(currView, route.getTealiumView());
 		}
+
+		if (utag) {
+			utag.view(currView);
+		} else {
+			this.set('_etLastView', currView);
+		}
 	}),
 });
-
-/**
- * Returns the domain.
- * @private
- * @memberOf {Mixin.TealiumRoute}
- * @return {String}
- */
-function getDomain() {
-	const host = window && window.location && window.location.hostname && '';
-	return host;
-}

addon/services/google-analytics.js

@@ -63,3 +63,3 @@ /*eslint no-console: ["error", { allow: ["warn", "log"] }] */
 
-		const config = getOwner(this).resolveRegistration('config:environment') || {};
+		const config = this._getConfig();
 
@@ -161,2 +161,12 @@ this.setProperties({
 	/**
+	 * Returns the config object.
+	 * @private
+	 * @memberOf {GoogleAnalytics}
+	 * @return {Object}
+	 */
+	_getConfig() {
+		return getOwner(this).resolveRegistration('config:environment') || {};
+	},
+
+	/**
 	 * Logs to the console.
@@ -163,0 +173,0 @@ * @private

index.js

@@ -51,8 +51,11 @@ /* eslint-env node */
 	addTealiumIQ(settings, env) {
-		const accountName = get(settings, 'emberTracker.tealiumSettings.accountName');
+		const tealiumSettings = get(settings, 'emberTracker.tealiumSettings');
 
-		if (env === 'test' || !accountName) {
+		if (env === 'test' || !tealiumSettings || !tealiumSettings.accountName) {
 			return '';
 		}
 
+		const accountName = tealiumSettings.accountName,
+			onload = Boolean(tealiumSettings.onload);
+
 		let tealiumEnv;
@@ -72,5 +75,19 @@
 
-		this.ui.writeLine(`Including Tealium IQ (${accountName} for ${tealiumEnv})`);
+		let text = `Including Tealium IQ (${accountName} for ${tealiumEnv}`;
+		text += (onload ? ' on load' : '') + ')';
 
-		return `<script>window.utag_cfg_ovrd={noview:true};(function(a,b,c,d){a='//tags.tiqcdn.com/utag/${accountName}/main/${tealiumEnv}/utag.js';b=document;c='script';d=b.createElement(c);d.src=a;d.type='text/java'+c;d.async=true;a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a);})();</script>`;
+		this.ui.writeLine(text);
+
+		let script = `window.utag_cfg_ovrd={noview:true};`;
+		if (onload) {
+			script += 'window.addEventListener("load", function() {console.log("onload");';
+		}
+		
+		script += `(function(a,b,c,d){a='//tags.tiqcdn.com/utag/${accountName}/main/${tealiumEnv}/utag.js';b=document;c='script';d=b.createElement(c);d.src=a;d.type='text/java'+c;d.async=true;a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a);})();`;
+
+		if (onload) {
+			script += "});";
+		}
+
+		return `<script>${script}</script>`;
 	},
@@ -77,0 +94,0 @@ };

package.json

 {
   "name": "ember-tracker",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Easily add Google Analytics page and event tracking to your Ember JS Application.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -1,5 +0,21 @@
-# ember-analytics
+# ember-tracker
 
-For more information about this addon, please visit the [Ember Tracker website](https://tsteuwer.github.io/ember-tracker).
+[![Build Status][build-status-img]][build-status-link]
+[![NPM][npm-badge-img]][npm-badge-link]
+[![Ember Observer Score][ember-observer-badge]][ember-observer-url]
 
+The simple way of tracking your app or addon using:
+
+[Google Analytics](https://developers.google.com/analytics/devguides/collection/analyticsjs/) using `analytics.js`.
+- [x] Pageviews - Every transition will be captured and sent as a page view!
+- [x] Events - Track what your users are doing by using the `events` events API.
+- [x] User Timing - Gague performance with the `timing` API.
+- [x] Social - Track shares, tweets, etc with the `social` (network) API.
+- [x] Custom page/titles and "before analytics" callback.
+
+[Tealium IQ](http://tealium.com/products/tealium-iq-tag-management-system/) tag manager
+- [x] Support for dev, qa and production environments out-of-the-box.
+
+For more information about this addon, please visit the [Ember Tracker website][main-site-url].
+
 ## Minimum Requirements
@@ -9,10 +25,100 @@
 * Ember CLI
+* IE9+ (When using the Tealium mixin with the `onload` setting.
 
-For versions lower than 2.3, you'll need to install the [ember-getowner-polyfill](https://github.com/rwjblue/ember-getowner-polyfill) addon.
+For versions lower than 2.3, you'll need to install the [ember-getowner-polyfill][getowner-poly-url] addon.
 
+## Setup
 
+First, install the addon via:
+
+```
+ember install ember-tracker
+```
+
+## Configuring Google Analytics
+
+After you've installed the addon, open your config file located in `config/environment.js`. Next, add a new object to the `ENV` variable called `emberTracker`. Finally, add an object on it called `analyticsSettings` with your `trackingId`. Your config should look something similar to:
+
+```
+[...]
+module.exports = function(environment) {
+	var ENV = {
+		[...]
+		APP: {
+			// Here you can pass flags/options to your application instance
+			// when it is created
+		},
+		emberTracker: {
+			analyticsSettings: {
+				trackingId: 'UA-########-#',
+			},
+		},
+	};
+[...]
+```
+
+Feel free to change your `trackingId` based on the environment you're in.
+
+Now, you can add the GoogleAnalyticsRoute mixin to your Router to start tracking pageviews and inject the service into your controllers/components. [Learn how][ga-doc-url]!
+
+### Options
+
+There are two options available for Google Analytics you may want to use in your `environment.js` file. They are:
+
+* `LOG_PAGEVIEW` (boolean) - Logs all `pageview` events to the console.
+* `LOG_EVENTS` (boolean) - Logs all `event`, `timing` and `network` (social) requests to the console.
+
+These options allow you to ensure your events are being fired.
+
+## Configuring Tealium IQ
+
+To allow Tealium, simply open the `config/environment.js` file and add a new object to the `ENV` variable called `emberTracker`. Finally, add an object called `tealiumSettings` with a your `accountName` as an additional property. Your config should look something similar to:
+
+```
+[...]
+module.exports = function(environment) {
+	var ENV = {
+		[...]
+		APP: {
+			// Here you can pass flags/options to your application instance
+			// when it is created
+		},
+		emberTracker: {
+			tealiumSettings: {
+				accountName: 'myAccName',
+			},
+		},
+	};
+[...]
+```
+
+### Options
+
+There is one option available for Tealium you may wish to use in your `environment.js` file. It is:
+
+* `onload` (boolean) - Loads Tealium after the `window.onload` event fires. It uses `addEventListener` which requires >= IE9.
+
+
+### Notes
+
+That's it! The addon will take care of using the dev, qa or production environments for you. For reference, it determines which environment to use in Tealium based on the following conditions:
+
+You're now ready to add the TealiumRoute mixin to your Router to start updating Tealium on new routes. [Learn how][tealium-doc-url]!
+
+Ember Environment | Tealium Environment
+----------------- | -------------------
+development | dev
+production | prod
+all others | qa
+
+## Additional Reading 
+
+I've put together more documentation on the [ember-tracker][main-site-url] website on how to use both the Google Analytics services as well as updating Tealium during route transitions.
+
+# Addon Maintenance
+
 ## Installation
 
 * `git clone <repository-url>` this repository
-* `cd ember-analytics`
+* `cd ember-tracker`
 * `npm install`
@@ -37,1 +143,12 @@ * `bower install`
 For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
+
+[main-site-url]: https://tsteuwer.github.io/ember-tracker
+[build-status-img]: https://travis-ci.org/tsteuwer/ember-tracker.svg?branch=master
+[build-status-link]: https://travis-ci.org/tsteuwer/ember-tracker
+[npm-badge-img]: https://badge.fury.io/js/ember-tracker.svg
+[npm-badge-link]: http://badge.fury.io/js/ember-tracker
+[ember-observer-badge]: http://emberobserver.com/badges/ember-tracker.svg
+[ember-observer-url]: http://emberobserver.com/addons/ember-tracker
+[ga-doc-url]: https://tsteuwer.github.io/ember-tracker/#/google-analytics
+[tealium-doc-url]: https://tsteuwer.github.io/ember-tracker/#/tealium
+[getowner-poly-url]: https://github.com/rwjblue/ember-getowner-polyfill

No alert changes

Improved metrics

Total package byte prevSize

20704

increased by41.92%

Number of package files

12

increased by9.09%

Lines of code

429

increased by20.51%

Number of lines in readme file

153

increased by325%

No dependency changes