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

If your website includes a single page application (SPA), or a one-page checkout, SessionCam will automatically record the site and show the visitor moving through the different steps of the funnel.

You can track and analyze the different steps, or dynamic page loads, that exist within that single page application. From this you can create a virtual 'SessionCam' page load for those steps (e.g. for any AJAX/DOM changes presenting to your customer different steps).

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

SessionCam can usually detect these dynamic changes/virtual page loads automatically. In the majority of instances, this happens with no additional code snippets required by you.

For more complex dynamic sites, you may need to add an extra snippet of code to help identify and separate out those individual steps using the  “virtual page load code”. There’s more information on this under the next heading.

Please contact us on support@sessioncam.com so that we can configure as required and test everything is working correctly.

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 needs to load immediately after each dynamic step has loaded.
The "NAME" part of the script is the identifier for each step and as such needs to describe what each step is. This must be one word (no spaces or special characters) . We recommend that you treat the name like it's a URL to ensure it's descriptive as possible and does not conflict with other virtual pages you may want to create (e.g. "/car-insurance/Step1" or "/checkout/PaymentPage" etc.).

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

You can also close the 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 with-in SessionCam that has virtual pages

A funnel that includes virtual pages are set up in the same way as usual (see Setting up a funnel).

The path for a virtual page will be as follows:
NAME [Virtual Page]
e.g. if you set the name to "/checkout/payment" in the script, the virtual page will be called "/checkout/Payment [Virtual Page]" in SessionCam.