How to track Dynamic Steps in a One-Page Process (Virtual Page Loads)

If your website is or includes a single page application (SPA) (a one-page checkout, for example) SessionCam can record your site and show a visitor moving through dynamic page loads or steps on your site. You can analyse the different steps or dynamic page loads that exist within an SPA.

A SessionCam virtual page load tells SessionCam to treat the dynamic step as a separate page. This will allow you to track interaction and drop-off with any virtual pages individually.

If, within your SPA, the path name changes dynamically SessionCam can usually detect these changes automatically and create virtual page loads without the need for any additional custom code.

For more complex dynamic sites, you may need to add an extra snippet of code to help identify and separate individual steps using our “virtual page code”.

You can create a virtual 'SessionCam' page load for any AJAX/DOM changes presenting different steps to your visitor.

How to create a virtual page load

You can add a Virtual Page Load call using the following code snippet:

<script type="text/javascript">
if(window.sessionCamRecorder) {
if(window.sessionCamRecorder.createVirtualPageLoad)
window.sessionCamRecorder.createVirtualPageLoad('NAME');}
</script>

(This code will only run if SessionCam is running on the page already.)

The "NAME" part of the script is the identifier for each step and as such needs to describe what each step is. We recommend that you treat the name like it's a URL, ensure it's as descriptive as possible, and does not conflict with any other virtual page names (e.g. "/car-insurance/Step1" or "/checkout/PaymentPage" etc.).

This code needs to load immediately after each dynamic step has loaded.
An example using virtual page load:

//VP Example - pet insurance
<script type="text/javascript">
if (typeof datalayer === 'object' && datalayer.page.name == 'pet insurance') {
    if (window.sessionCamRecorder) {
        if (window.sessionCamRecorder.createVirtualPageLoad)
        window.sessionCamRecorder.createVirtualPageLoad('/pet-insurance');
    }
}

</script>

Some special characters can be used in virtual pages names (“/”, ”-”, ”_”). We recommend not using spaces. Any other special characters may cause unusual behavior or stop SessionCam recording altogether.

You can also close a Virtual Page Load and return to the normal page load using the following snippet

<script type="text/javascript">
if(window.sessionCamRecorder && window.sessionCamRecorder.closeVirtualPage) {
window.sessionCamRecorder.closeVirtualPage();
}
</script>

How to create a funnel within SessionCam that has virtual pages

Virtual pages can be used in funnels as if they were normal page loads (see Create a conversion funnel).

The path for a virtual page will be shown as follows:

NAME [vp]

E.g. If you set the virtual page name to "/pet-insurance" in the script, the virtual page will be called "/pet-insurance [vp]" in SessionCam.