Track URL change with Google Analytics without reloading the page

Question

I have a button, that triggers JS and return different modals depending on random logic. In order to maintain seamless flow, I can't reload page, but I need to track what modal is opened and what button is clicked in it.

I can change URLs by utilising JS window.location to track what is shown and clicked.

window.location.hash = 'clicked1'

which will alter my URL to this www.site.com/#clicked1 or www.site.com/#clicked2 Question is, how I can track it in Google Analytics?

Can someone guid me through this jungle so I can better understand the process. Should I use event tracking instead? Or I can track URLs without reloading the page.

Answer 1

Here is a great article about tracking a single page application with Google Analytics.

To track dynamically loaded content as distinct pageviews you can send a pageview hit to Google Analytics and specify the Document Path by setting the page field.

ga('send', 'pageview', '/#clicked1);

it's usually best to update the tracker object with any new page information prior to sending hits. This will ensure that all hits are associated with the correct page data.

To update the tracker object, use the set method:

ga('set', 'page', '/#clicked1);

If you want to update more than just the page field, you can pass an object of key/value pairs to the set method.

ga('set', {
  page: '/#clicked2',
  title: 'Clicked 2'
});

Once the tracker has been updated with the proper data for the new page, you can send a hit without overriding page related parameters. For example:

ga('send', 'pageview');