SPA with UET (Single Page Applications)

Single page applications have grown in popularity in recent years - this presents a challenge for conventional tracking. With SPAs, content is dynamically loaded without a typical navigation event occuring. In a sense the page is only loaded once. However, from an analytics and goal tracking standpoint, it is necessary to treat each separate navigation as a new pageLoad.

SPA applications are required to use the JavaScript UET tag. SPA events are fired using the same syntax as custom events, with the action 'page_view' and at a required 'page_path' parameter ('page_title' is optional). 'page_path' must start with a '/'. Example:

window.uetq = window.uetq || [];
window.uetq.push('event', 'page_view', { page_path: '/spa_page' });

There are three "direct on site" samples we offer. We recommend using the first unless there is a reason otherwise:

1. Content change - fire an SPA event any time your application loads dynamic content. In this case, the real URL is automatically sent in a standard pageLoad event on the first load. You can use this URL in your destination goals the same as today, and any custom events fired on that first page will be associated with it. Each SPA event will generate a pageLoad event with the SPA URL, which is not required to be a loadable path. You can reference these URLs in your goals as well. Any custom events fired after an SPA event will only be associated with the SPA pageLoad (i.e. not the original URL).
2. All pages - fire an SPA event on all pages, including the initial load. This scenario is the same as the preceeding one, except the auto pageLoad event is not used. Because it still fires, it is important to order your events so that the SPA event fires before any other custom events. If they fire out of order, some or all may be associated with the auto pageLoad event (and original URL), instead of the SPA pageLoad event (and SPA URL including page_path).
3. All pages auto disabled - fire an SPA event on all pages and additionally disable the auto page load. This is accomplished by adding disableAutoPageView: true to the initialization parameters (note: do NOT modify the snippet code directly to disable). This is the same as the previous scenario, but removes the requirement that the SPA event must be fired first on the initial page load. However subsequent SPA events are still required to be fired before any custom events that are associated with them (or they will be attributed to the previous SPA event).

Framework samples coming soon (Angular, React).