Analytics on a bootstrap modal with pageview and time related metrics

Question

I have a page (let's name it the overview page) with a lot of images of projects that on a click open a bootstrap (v3) modal with more info about that project. Each project also has its own page (single page).

I'd like to track pageviews for the projects when a user opens the modal with Google (universal) analytics. Now I'm planning on doing this by adding the following code to each link on the overview page:

onClick="ga('send','pageview','/url-to-project-page');"

I expect this works fine since I've seen this method in other posts regarding tracking pageviews on AJAX calls.

But I'm wondering how this affects time related metrics like average time on page, since analytics can't know when the modal is closed (the same as leaving a single page).

Does anyone know if the metrics will be comparable to a normal single page view, or will some parts of the metrics (I'm guessing time related metics) be off because analytics isn't able to track them?

Solution

If I understand it right, you want to track the opening of the modal as a pageview of the projects page. This can be accomplished with what you just said, but using a direct URL would be unwise in my humble opinion. You would be better off using a virtual URL(VURL) instead. Read more about virtual URLs here.

It is also available in Universal Analytics(UA) (analytics.js) and when you are sending such a pageview as you mentioned above, you are forcing GA to report a pageview of the specified URL. Your code, (1) ga('send','pageview','/url-to-project-page'); will work.

In UA, ga('send','pageview'); is used to send the current pageview. If you need to send a virtual pageview (or a pageview which has not happened but you want to be recorded), you can also send it as: (2)

ga('send', 'pageview', {
  'page': '/url-to-project-page'
});

or as (3)

ga('set', 'page', '/url-to-project-page');
ga('send', 'pageview');

or as (4)

ga('send', {
  'hitType': 'pageview',
  'page': '/url-to-project-page'
});

The implementations 1, 2 and 4 are same, but 3 is different.

You can read more about the implementations here, here and here.

This would affect your pageviews count (you will see an increase), but would not increase your visits (as no user can 'land' on a virtual page (unless you make them do so)). This will impact your bounce rates, but it will not be 'off' in the sense that if they view your project in a modal, it means they have interacted with your site hence they should not be marked as a bounce, and this is what happens when you send a virtual pageview.

Though what you wanted to do was correct, your implementation suffers from not being able to differentiate modal views from actual project page views. I would overcome this by organising the VURL structure in a way that it makes sense and is semantic. As an example, instead of sending a VURL which corresponds directly to your project single page url, I would send it like: ga('send','pageview','/virtual/modal/url-to-project-page');

This way, you can filter out the VURLs by adding an exclude filter for /virtual from pageviews so that virtual pageviews are not shown. Also, you can view total pageviews for project pages by using /url-to-project-page. Also, you can view all virtual pageviews resulting from the opening of modals by using /virtual/modal.

Time on Page and Pageviews/Visit and such metrics will change, but it depends on how you see it, whether as an error or improvement in accuracy. Time on Page is recorded for the virtual pageviews until the user navigates to a new page, or a request to report a VURL is sent, or until the session is closed (whichever happens first).

Hope that helps! :)