Javascript Overlay/Dialog Tracking with Google Analytics

Question

Using javascript (jQuery to be precise in my case) I need to enable a dialog box to be tracked in Google Analytics as a unique page view, despite it being only a modal overlay.

For context purposes I dont want the user leaving the page and the dialog content is loaded in via an ajax call.

Answer 1

Assuming you're using Google Analytics new async code, all you need to do is place this code in the JavaScript block where you render your modal dialog.

 _gaq.push(['_trackPageview', '/fake/modal/path/here']);

If you're using the old code,

   pageTracker._trackPageview('/fake/modal/path/here');

---

The basic gist of this is you should attach the _trackPageview call anywhere you're binding an event event that changes the modal. If you're doing this for multiple modal pageviews, you'll need to either manually code each internal modal page, or programmatically name them. If these modal changes trigger changes in the URL's hash, you could try this approach: Tracking Anchor Links in Goal Funnels

Answer 2

As per Google's documentation, ga.js is now a legacy library. So if you are using the latest version of this library, which is analytics.js, then the response would be:

ga('send', 'pageview', '/fake/modal/path/here');