In this section we will talk about how to track SPA(Single-Page Applications ) and PWA(Progressive Web Apps)in Adobe Launch.
Principle
In general, SPAs do not rely on traditional browser page loads, the URL of the page the user sees may has not changed, but the content of the page displayed by the user does change, so the traditional tracking based on Page Load is not applicable.
- Step1：View change or action on SPA page——Listen to some changes on the page. When the user operates on the SPAs page, although the URL is not changed, the content displayed on the page will change, so you can listen to these changes until the user clicks on a different page. The setting for this step is the EVENTS in Rules.
- Step2、Step2、Step4——This step needs to be processed on the page and needs to be developed. When the user operates, every page that is opened will have some data to be passed to Adobe Launch, such as Page Name, Page Title, Page URL … The page needs to be assembled and placed now, either through the Data Layer or other Event Type such as Data Element Change, History, Custom Event, etc.
- Step5：Set Variable——This step is in ACTIONS, configure some page information passed in the previous step, configure it into the form of a page, and then send it out in the form of Beacon to become a PageView.
- Step6、Step7：Because it is doing SPA tracking, it is hoped to treat it as a page, so it is often set to st.():
- Step8：Clear Vars——This setting is different from the normal page setting. It should be loaded only once for a single page application. If it is not set, the PageView sent later will inherit the data from the previous first load, which will cause confusion, so it needs to be Clear, directly use the data sent from the previous page instead of the previous one.
Configuration Process: Setting the Rule
Event
Create two in the Event, one is Library Loaded (Page Top), and the other is History Change, which does not require any settings:
Action
Do the following settings in Action:
The focus is on “Set Variables”, the ADDITIONAL SETTINGS in “Set Variables” should set the Page Name and Page URL. This setting is to update the Page Name and Page URL to the latest.
If it is not set, the sent page url will be the first page, used to access other pages, the page url will remain unchanged, and the parameter g will remain unchanged.
