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.

• 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

Set Event

• 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",
        page:{
            pageInfo:{
                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:

Set Action

The final effect is this:

Publish and Test