Implementation best practices for Single Page Applications (SPAs) implementation-best-practices-for-single-page-appliations

Learn some best practices for implementing Adobe Analytics on Single Page Applications (SPAs). This includes using Experience Platform Tags, the recommended implementation method.

INITIAL NOTES:

Simple diagram of working with SPAs in Experience Platform Tags simple-diagram-of-working-with-spas-in-tags

NOTE: This is a simplified diagram of how SPA pages are handled in an Adobe Analytics implementation using Experience Platform Tags. The following sections identify steps and issues to consider.

Set the data layer set-the-data-layer

When new content is loaded or when an action occurs on a SPA page, update the data layer first. This must happen before a custom event that triggers a rule executes in Experience Platform Tags. This ensures that the correct values from the data layer are pushed into Tags and then Adobe Analytics.

The following is a sample data layer. Any of these elements may change based on the initial view or subsequent change of the view given an action taken on your SPA page. For example, on a full or majority view change, it is a common requirement to pass in a unique “pageName” value to differentiate between the views in Adobe Analytics reporting.

<script>
    digitalData = {
        pageInstanceID: "Launch Demo Site",
        page:{
            pageInfo:{
                pageID: '2745374',
                pageName: 'acs demo - product listing page'
            },
            attributes:{
                project: "Experience Platform Launch Project"
            }
        },
        user : [ {
          "profile" : [ {
            "attributes" : {
              "gender" : "male",
              "age" : "35"
            }
          } ]
        }],
        libraries : {
          adobe : {
            launch : {
              state : 0, // 0 = not loaded , 1 = loaded
              domain : "assets.adobedtm.com"
            }
          }
        }

     };
    </script>

Set custom events and listen for these events in Experience Platform Tags setting-custom-events-and-listening-in-tags

When new content loads or when an action occurs on the SPA page, Experience Platform Tags needs to be informed to run a rule that sends data to Analytics. There are a couple approaches for this: Direct Call rules or Custom Events.

Examples: In this help document, there are links to sample SPA sites that implement Analytics and other Experience Cloud solutions. In these examples, the following custom events are used:

Refer to the pages and docs referenced above for more information about how and when these events fire. You do not need to use the same event names in your implementation. The functional use case for the method used is essential to understand as the recommended best practice for each. The following video demonstrates a sample SPA page and sample code in Experience Platform Tags that listens for the custom events.

Execute s.t() or s.tl() in the Experience Platform Tags running-s-t-or-s-tl-in-the-launch-rule

An important concept to understand for Analytics when working with a SPA is the difference between s.t() and s.tl(). Your code triggers one or the other of these methods in Experience Platform Tags to send data into Analytics.

TIP: As a general guideline, if the screen changes by more than 50%, use the s.t() page view call. Otherwise, use s.tl(). However, use your judgment when considering actions that constitute a new “page” and how that should be presented in Adobe Analytics reports.

The following video shows where and how to trigger s.t() or s.tl() in Tags.

Clear Variables clear-variables

Send the right data into Analytics at the right time. In a SPA environment, a value stored in an Analytics variable persists and resends into Analytics, potentially when you no longer want it. A function exists in the Analytics Tags extension to clear the variables to ensure that the next call doesn’t errantly send data into Analytics.

The diagram above shows variables cleared after you send in data. In reality, this can happen before OR after the call, however, be consistent in your Experience Platform Tags rules for a cleaner implementation. If you clear variables before you execute s.t(), set the new variables immediately after the call and then proceed to send the new data into Analytics.

NOTE: Clearing variables is not always needed when running s.tl(). This call requires the use of the linkTrackVars variable to instruct Analytics which variables to set. This happens automatically Experience Platform Tags through configuration. It prevents errant variables from setting in contrast to the behavior with s.t() calls in a SPA environment. To ensure the cleanest and most reliable implementation, it is likely easier to use the clear variables function for both calls in a SPA environment.

The following video shows where and how to clear variables in Tags.

Additional considerations additional-considerations

Custom Code windows in Experience Platform Tags custom-code-windows-in-tags

In the Tags Analytics extension, there are two places where custom code may be inserted: The “library management” and “Configure tracker using custom code” sections.

Either one of these locations runs the code contained therein once for the initial page load your SPA page. If the code should run on a view or action change, implement that code in the appropriate rule (for example, the “page load: event-view-end” rule), to ensure that the code executes every time the rule runs. When creating thet action in the rule, set Extension = Core and Action Type = Custom Code.

“Hybrid” SPA and traditional sites hybrid-spa-and-traditional-sites

Some sites are comprised of a combination of traditional and SPA pages. In this instance, use a strategy that works for both page types. When configuring your custom events on the site and triggering rules in Experience Platform Tags, ensure that double hits aren’t sent into Analytics based on hash changes, and so on. In this case, suppress one of the page views to prevent duplicate data passed into Adobe Analytics.

If you decide to separate the functionality into unique rules for more control, remember to document that you have done this. If you change one rule, make the same change to the other rule.

Integration with Target using A4T integration-with-target-using-a4t

When integrating with Target using A4T, confirm that the Target and Analytics requests sent in on the same view or action pass the same SDID parameter value. This ensures that your data properly synchronizes in the backend.

To view these hits, use a debugger or packet monitoring tool. Adobe provides an Experience Platform Debugger for this purpose. It’s a Chrome extension that can be downloaded here. Target should execute first on the page. This can be verified in the debugger, as well.

Additional resources additional-resources