1. Home
  2. Docs
  3. Adobe Launch Guide
  4. 26 Implementation for Single Page Application

26 Implementation for Single Page Application

In this section we will talk about how to track Single-page applications (SPAs) in Adobe Launch.

In general, SPAs do not rely on traditional browser page loads, or traditional analytics page views,  the URL of the page the user sees 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.

In this section we focus on using Launch by Adobe, which is the recommended implementation method.

All SPAs code structures are different. I will explain the general method here to teach you how to deal with these problems. Simple diagram of working with SPAs in Launch by Adobe:
26 Implementation for Single Page Application
  • 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.

Create a Rule

Create a Rule and name it SPA:
26 Implementation for Single Page Application

Set Event

Set the first basic: Core-Library Loaded (Page Top), automatically track when the page is first opened:
26 Implementation for Single Page Application
Set the second one. This step can use Direct call, Custom Event, Data Element Change, and History Change. This step needs to be coordinated on the page, because some page data needs to be passed, such as the user clicks to visit a new page, the name of the new page, Title, url need to be passed over
  • Direct call——The Direct Call Rule is a way to force a rule to fire. The rule will trigger when the code is executed, so it can be very accurate. This method requires developers to add code at each trigger location. When the project is large, it will be more difficult to maintain the code. This method is not applicable. This method is suitable for simple SPAs project.
  • Custom Event——It more functionality, and for the ability to dynamically attach a payload with different values, you should set custom JavaScript events and listen for them in Launch, where you can use the payload to set variables and send the data into Adobe Analytics. It is more likely that you will need this functionality, and so this option is considered the best practice. It is a way to force a rule to fire. Therefore, compared with Direct call, I recommend you use Custom Code.
  • Data Element Change——Data Element Change event type polls the data element every 1000ms (1s). so if the user leaves the site or the page changes to quickly, the event might not be triggered.
  • History Change——This method is to monitor whether the URL has changed. It is sometimes applicable to SPAs, but sometimes not applicable. It is more suitable for long pages. For example, when the user clicks another link to go to the bottom page, this method is used.
 digitalData = {
        pageInstanceID: "Launch by Adobe BCS Site",
                pageID: '2745374',
                pageName: 'Article-1'
               pageTitle: 'BCS|Implementation for Single Page Application'
               pageURL: '/adobe-launch/article-1-1-1'

Here we use the method of Data Element Change to demonstrate:

When new content is loaded on a SPA page, or when an action takes place on a SPA page, one of the first things you should do is to update the data layer. Here is the code of the data layer after the user clicks:

Then use Data Elements to get the Page Name:
26 Implementation for Single Page Application
Our second EVENTS can be set to:
26 Implementation for Single Page Application
The effect of the event after setting is:
26 Implementation for Single Page Application
You can also control the priority of the trigger by controlling the Order

Set Action

Action needs to set three, the first is Clear Variables
26 Implementation for Single Page Application
The purpose of this step is to avoid using the data of the first page load, causing data confusion.
The second part is Set Variables. The data passed from the page needs to be set here. Here I set a SAP-Page Name as an example.
26 Implementation for Single Page Application
The last step is to send it out through the beacon, the s.t (): selected here, because we want to see it as a Page View.
26 Implementation for Single Page Application
The final effect is this:26 Implementation for Single Page Application

Publish and Test

Finally you can go to test and you can publish it without any problems.

If you don't understand, You can leave a comment below.