10
Single Page Application Tracking - Web Tracking (analytics.js

Google Analytics Single Page Websites

Embed Size (px)

Citation preview

Page 1: Google Analytics Single Page Websites

Single Page Application Tracking -

Web Tracking (analytics.js

Page 2: Google Analytics Single Page Websites

Single Page Application Tracking - Web Tracking (analytics.js)

A single-page application (SPA), is a web application or website that

fits on a single web page with the goal of providing a more fluid user

experience akin to a desktop application.

Page 3: Google Analytics Single Page Websites

Single Page Application Tracking - Web Tracking (analytics.js)

This guide describes how to use analytics.js to track pages on sites whose

content is loaded dynamically without traditional full page loads.

Page 4: Google Analytics Single Page Websites

Single Page Application Tracking - Web Tracking (analytics.js)

A Single Page Application (SPA) is a web application or website that loads

all of the resources required to navigate throughout the site on the first page

load. As the user clicks links and interacts with the page, subsequent content

is loaded dynamically. The application will often update the URL in the

address bar to emulate traditional page navigation, but another full page

request is never made.

Page 5: Google Analytics Single Page Websites

Single Page Application Tracking - Web Tracking (analytics.js)

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.

Tracking virtual pageviews

ga('send', 'pageview', '/new-page');

Page 6: Google Analytics Single Page Websites

Single Page Application Tracking - Web Tracking (analytics.js)

Specifying a page value in a pageview hit will send that page value to

Google Analytics for that hit only; it will not update the page value

stored on the tracker object itself. This can be problematic if you send

other hits (e.g. events or social hits) and don't explicitly include the

current page value. In such cases, Google Analytics will associate those

hits with whatever URL was present at the time of the initial page load.

Setting page data for multiple hits

Page 7: Google Analytics Single Page Websites

Single Page Application Tracking - Web Tracking (analytics.js)

To avoid this issue, 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:

Setting page data for multiple hits

ga('set', {

page: '/new-page',

title: 'New Page'

});

ga('send', 'pageview');

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:

Page 8: Google Analytics Single Page Websites

Single Page Application Tracking - Web Tracking (analytics.js)

❖ Do not update the document referrer

❖ Do not update the document location

❖ Do not create new trackers

What not to do!

Page 9: Google Analytics Single Page Websites

Single Page Application Tracking - Web Tracking (analytics.js)

❖ DANCE!

❖ DANCE!!

❖ DANCE!!!

What to do?

Page 10: Google Analytics Single Page Websites

Read More

https://developers.google.com/analytics/devguides/collection/analyticsjs/single-

page-applications