#Site Analytics

Site Analytics are page view and event tracking analytics. The [orchard](https://github.com/theorchard/orchard) codebase app lives at [frontend/js/apps/site-analytics.js](../js/apps/site-analytics.js)

Currently, it is entirely based upon [Google Analytics](https://developers.google.com/analytics/devguides/collection/analyticsjs/) and so we use their conventions for logging, which is primarily aimed at being human-readable. 

## [Event Tracking](https://developers.google.com/analytics/devguides/collection/analyticsjs/events)

Event tracking is more about showing feature usage than it is about logging for data mining. However, there are some options for logging actual attributes such as `name` or `id` or even some `json` that represents a model if needed. Large unreadable JSON blobs are not generally a good idea though because this isn't really a data warehouse, and searching JSON in the Google Analytics interface is suboptimal. 

Here is how they break down an `event`:

*  **Category**: usually the controller name e.g.  `Marketplace`, `Analytics Index`, `Analytics Overview`
* **Action**: the part of the feature you are trying to capture usage for eg: `Change Calendar`, `Select By`, `Launch App`, `Uninstall App`
* **Label** ideally this is meant to be a label for the next field, "Value" such as label: artist, value: artist_id. But if you want more information than just name and id, you can technically put JSON in it.
* **Value** this field is required to be an integer. that can be a 0/1 state, or a model id or any number value. 

### Javascript Based Tracking:

Requires that the Google Analytics [copy/paste code](https://developers.google.com/analytics/devguides/collection/analyticsjs/index) has been executed. 
Basic syntax for sending an event is:

    ga('send', 'event', 'category', 'action', 'label', value);  // value is a number.

###HTML Based Tracking

By using some DOM element attributes, event tracking can be enabled if the `site-analytics` js app has been loaded on that page. This is done like:

    <a|button|any
	    class="site-analytics"
	    data-event="click|mouseover|any"
	    data-event-category="Category Name"
	    data-event-action="Action"
	    data-event-label="My Label"
	    data-event-value="76|number"
	</a>

##[Page Tracking](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages)

Page tracking is done automatically once for any page which loads the `site-analytics` app. Additionally, page tracking can be done on-demand using Google's `ga()` syntax, which is useful inside single page apps. 

Chaplin Example:

    // track all successfully routed urls to Google Analytics
	Chaplin.mediator.subscribe('dispatcher:dispatch', function(currentController, params, route, options) {
	    var url = '/analytics' + (route.path ? '/' + route.path : '') + (route.query ? '?' + route.query : '');
	    if (typeof ga !== 'undefined') ga('send', 'pageview', url);
	});

##Debugging and Testing

There is a handy Chrome [extension](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna), which outputs Google Analytics actions to the [console](https://developer.chrome.com/devtools/docs/console). 

It's output looks like:

```
Initializing Google Analytics.
analytics_debug.js:9 Executing Google Analytics commands.
analytics_debug.js:9 Running command: ga("create", "UA-59972169-1", {userId: "8736"})
analytics_debug.js:9 Creating new tracker: t0
analytics_debug.js:9 Executing Google Analytics commands.
analytics_debug.js:9 Running command: ga("set", "dimension1", "8736")
analytics_debug.js:9 Executing Google Analytics commands.
analytics_debug.js:9 Running command: ga("set", "dimension2", "8869")
...
www.google-analytics.com/analytics_debug.js:9 Running command: ga("set", "dimension3", "1043")
www.google-analytics.com/analytics_debug.js:9 Executing Google Analytics commands.
www.google-analytics.com/analytics_debug.js:9 Running command: ga("send", "pageview")
...
www.google-analytics.com/analytics_debug.js:9 dimension1       (&cd1) 8736
www.google-analytics.com/analytics_debug.js:9 dimension2       (&cd2) 8869
www.google-analytics.com/analytics_debug.js:9 dimension3       (&cd3) 1043
...
www.google-analytics.com/analytics_debug.js:9 title            (&dt)  The Orchard
www.google-analytics.com/analytics_debug.js:9 trackingId       (&tid) UA-59972169-1
www.google-analytics.com/analytics_debug.js:9 userId           (&uid) 8736
...
www.google-analytics.com/analytics_debug.js:9 Running command: ga("send", "pageview", "/analytics/index")
...
analytics_debug.js:9 Running command: ga("send", "event", "Analytics Overview", "Calendar", "6 Month")
...
analytics_debug.js:9 dimension1       (&cd1) 8736
analytics_debug.js:9 dimension2       (&cd2) 8869
analytics_debug.js:9 dimension3       (&cd3) 1043
...
analytics_debug.js:9 eventAction      (&ea)  Calendar
analytics_debug.js:9 eventCategory    (&ec)  Analytics Overview
analytics_debug.js:9 eventLabel       (&el)  6 Month
...
```
For more information on extending and making plugins for Google Analytics, go [here](https://developers.google.com/analytics/devguides/collection/analyticsjs/).

##User Tracking

*This is really further reading and not required to get going adding site analytics to your user facing app.  

Using different different [dimensions](https://developers.google.com/analytics/devguides/collection/analyticsjs/custom-dims-mets), we track pageviews by userId, labelId, and impersonatorUserId. These three things are being mapped to Google's dimensions as:

	dimension1: userId (orchadmin user id in OA, vendor contact id in Workstation)
	dimension2: labelId (always in Workstation)
	dimension3: impersonatorUserId (if the session is impersonated by orchadmin user)