Single Page Apps

Some web properties will be built as Single Page Apps (SPA). SPAs should always be configured and managed by an experienced developer. They represent a series of unique behaviors, many unique to particular frameworks, that can impact how the Lytics JavaScript tag needs to be configured to support the desired use cases. For most SPAs, there are two important things to consider.

As a visitor takes actions and events are sent to Lytics using the standard send event, the profile and audiences it is a member of will inevitably change. In order to leverage this updated information for web custom web personalization or to push the updated information to any of Lytics' web-based integrations the latest profile must be retrieved. This is accomplished with the following JavaScript:

<script type="text/javascript">
    window.lio.loaded = false;
    window.lio.hasEntity = false;
    window.lio.getEntity();
</script>

Let's break down the above example and describe what each of the commands is responsible for:

window.lio.loaded = false;
The above command will reset the loaded state for the core JavaScript tag. This is necessary to ensure additional callbacks can be sent in relation to requesting the new profile. Without resetting this value to false, the addition of a new callback will result in an immediate response containing the profile data that has already been loaded, rather than the refreshed one we are about to request.

window.lio.hasEntity = false;
The above command will allow the core JavaScript tag to request the profile from the Lytics Entity API again. This flag is in place to prevent unnecessary calls to the Entity API if we already have a valid entity. In this case, of course, we want to get the latest entity and allow the API call. Failing to reset this flag will result in the existing entity being returned to all callbacks.

window.lio.getEntity();
The above command will trigger the request to get the latest profile. Upon reception of the latest profile, all callbacks and push-based integrations, such as Google Analytics, will be triggered as well with the updated profile data.

Callbacks are a critical component when executing anything that relies on data from the user profile. As such, adding additional callbacks in relation to a profile refresh for Single Page Apps are fully supported. Building on the example from above, you may add additional callbacks once the window.lio.loaded = false; has been fired. As long as window.lio.loaded = true; the callback will be immediately fired and include the existing profile data rather than the new one that is soon to be loaded. Please visit our JavaScript tag callback documentation for additional information related to callbacks.

<script type="text/javascript">
    window.lio.loaded = false;
    window.lio.hasEntity = false;
    window.liosetup.addEntityLoadedCallback(function (data) {
        console.log(data.segments);
    });  
    window.lio.getEntity();
</script>