Making Google Analytics blaze on Clearapp: part 2
Things have come a long way since we all started using our beloved GA. Page views are great, but what about virtual page views, events, e-commerce tracking, or custom parameters? What about cross domain tracking?
A lot of these can be handled out-of-the-box with Clearapp. In part 1 we looked at the basic setup of Google Analytics, detailing how to get the app up and running on your website. In this article we're going to explore a couple more of these topics in a little more depth: virtual page views, and event tracking.
Introducing Clearapp events
In Clearapp, we've built in a great system to allow for the triggering and listening to global events. This acts very similarly to the on and trigger functions used by jQuery and Backbone:
// Trigger the event "myCustomEvent" Clearapp.trigger("myEvent"); // When the myEvent happens, do something Clearapp.on("myCustomEvent", function() { // runs when myCustomEvent is triggered });
We've baked listeners into the Google Analytics app, so all you have to do is trigger some global events and the app will auto-send data back to Google's servers.
Wait… why not just use the GA code instead of "trigger"?
Of course, using the GA code will work great as well. However what the trigger function is great for is when you have multiple apps wanting to act upon virtual page views or events. Both methods work, but this is much more forward thinking.
Virtual page views
The Google Analytics app fires a virtual page view when the virtualPageview event is triggered:
Clearapp.trigger("virtualPageview", "/my-custom-url-path");
So what does this look like in your code? Let's use a jQuery on click example:
$("#open_lightbox").on("click", function() { Clearapp.trigger("virtualPageview", "/photo-lightbox"); });
Event tracking
GA Event tracking can be run through Clearapp in a very similar way, except that an object is used to pass back additional information:
Clearapp.trigger("event", { category: "lightbox", action: "next_button_click", label: "Step 3", value: 1 });
That's it for now! Next time we'll look at some more advanced concepts, including passing back custom variables. If you're not a code and don't know how to trigger these events, we've got something in the pipeline for you too. Stay tuned!
