Tracking Dynamic Steps in a One-Page Process (Virtual Page Loads)

If your website includes a single page application, or a one-page checkout, SessionCam will automatically record the site, and show all the interactions and the visitor moving through the different steps.

However,  you may wish to track and analyze the different steps or dynamic page loads that exist within that single page App and create a virtual 'SessionCam' page loads 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 then you can track interaction and drop off with these steps(virtual pages) individually.

The SessionCam tool can usually automatically detect these dynamic changes/virtual page loads and, in the majority of instances, with no additional code snippet additions required by you.

Please contact the SessionCam team so we can configure as required and test all works as expected. 

For more complex dynamic sites, it may be that SessionCam will ask you to add an extra small snippet of code to help us identify and separate out those individual steps, using our "virtual page load" code.  See further details below. 

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.