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

Answer 1

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! :)