Integrating SiteSpect and SessionCam

SessionCam provides a unique set of tools for website optimization such as session replay, heatmaps, and conversion funnel technology.

SiteSpect allows you to export data to external analytics tools to give greater insight into the customer experience. Since SiteSpect exists in the flow of traffic it can pass data to SessionCam with ease. As a result, SiteSpect can dynamically share information such as Campaign ID, Variation Group ID, and much more. See Macros for more information.

You can apply filters to heatmaps and conversion funnels based on the information that SiteSpect shares. Using filters applied across various tests as well as replays of user interactions on the website, you can learn why a specific experiment is effective when compared to others using qualitative data and visualizations giving you a better understanding of the overall customer experience.

High-Level Integration Steps

To integrate SiteSpect and SessionCam, you’ll need to take the following steps, each of which is described in more detail in later sections of this document:

Setting up SessionCam
Setting up SiteSpect WATTS Site Variation
Validating the Integration
Configuring SessionCam’s Dashboards with SiteSpect Data

Setting up SessionCam

SessionCam works using a JavaScript tracking code that is inserted into your HTML pages. Refer to your SessionCam documentation for detailed instructions on how to do that.

You can verify that SessionCam is on the page using a console function to locate the following:

typeof sessionCamRecorder == "object" sessionCamRecorder.getConfig().I

Once the integration is established, SiteSpect automatically notifies SessionCam which Campaigns and Variations each visitor is exposed to.

Setting up a SiteSpect WATTS Site Variation

SiteSpect’s search and replace engine transforms HTML in the flow of traffic. To send SiteSpect data to SessionCam, create a Site Variation using SiteSpect’s WATTS macros. Site Variations allow you to make site-wide changes independent of SiteSpect Campaigns. WATTS macros are dynamic variables or data points that are expanded when the Variation is applied.

To start the integration, configure SiteSpect to pass the Campaign ID and Variation ID to SessionCam. To do this, create a SiteSpect Site Variation with our default code snippet .

Select New, Global Variation.
Name the Global Variation SessionCam Integration and in the Scope field, select Site.
Click the WATTS button on the right side of the page. This prefills the Site Variation with some key WATTS macros.

To see the code that the WATTS button just inserted, expand the Triggers area of the page by clicking the right arrow next to Triggers and the right arrow next to Search & Replace.

It adds a Page Source Trigger that matches on the </body> tag. This means that the Site Variation is applied only when the page has a </body> tag. This is important because you want to make these changes only on HTML pages and not for other content.

In addition, it specifies that SiteSpect should search for the </body> tag and replace it with the WATTS JS code you see above, right before the closing </body> tag. The WATTS macro used here, __SS_LISTCAMPAIGNCOUNTED, iterates through assigned and counted Campaigns, dynamically injects actual values for the visitor and stores this SiteSpect data in a JavaScript variable called ss_watts.

To make this WATTS Site Variation specific to SessionCam, create the ss_watts variable and pass each Campaign and Variation to SessionCam:

Edit the Site Variation in SiteSpect to send the customDataObjects you create during next steps to SessionCam. To do so:

Select Components, Global Variations, then choose the Site Variation you created above called SessionCam Integration.
Expand the Search & Replace area of the page by clicking the right arrow next to Search & Replace.
In the Replacement Text field, after the visitor’s counted CampaignIDs and VariationGroupIDs are stored as a string in the variable ss_watts, before pushing the variables you need to do a few checks, for example, the following should evaluate to true:

if(“window && window.sessionCamRecorder && typeof sessionCamRecorder == "object" && sessionCamRecorder.getConfig() && sessionCamRecorder.getConfig().I”)

This checks two things:

typeof sessionCamRecorder ensures “SessionCam” tag is present on the page
sessionCamRecorder.getConfig().I should return a true to figure out whether SessionCam recording the page (sometimes clients only want to record a percentage of traffic)

Once the above checks pass, iterate through the “ss_watts” variable and send the data to SessionCam using the function called sendSCData.
- Using this function, you push your data from the ss_watts variable to “sessioncamConfiguration.customDataObjects”.

When you are done editing the Replacement Text field, it looks like the following:

The following is the entire code snippet, which you can copy and paste into the Replacement Text field:

In the Status field at the top of the Global Variation page, ensure that the Site Variation is set to Active.
Click Save at the bottom of the page.

You are now sending SiteSpect data to SessionCam, which includes Campaigns and Variations that the visitor saw.

Validating the Integration

There are two steps required to validate that the integration is set up correctly and that SiteSpect is actually sending data to SessionCam:

Validate that SiteSpect is injecting the correct code.
Verify that SiteSpect is successfully sending data to SessionCam.

To validate that SiteSpect is injecting the correct code onto the page:

While still on the Site Variation page, open the Preview Settings area and select any Campaign from the As if Assigned To drop-down.
Click Preview at the bottom of the page. This launches a new tab with changes applied to the page.
View the source code to ensure that the code is injected onto the page. You will see actual SiteSpect Campaign IDs and Variation Group IDs filled in the ss_watts variable.

To validate that SiteSpect is sending data to SessionCam, take a look at event actions associated with recent recordings.

When the variable function sendSCData() fires, you should see SaveEvents like the one below in the network tab:

https://ws.sessioncam.com/Record/record.asmx/SaveEvents?url=https%3A%2F%2Fdemo.sessioncam.com%2F

One of the SaveEvents gets data from “sessioncamConfiguration.customDataObjects”. You can use this data in SessionCam site to get more insights about your Campaigns. The event relevant to the custom variable displays the information relating to the variable in the headers form data.

Configuring SessionCam’s Dashboards with SiteSpect Data

SiteSpect’s integration with SessionCam allows you to run side-by-side heatmaps for visitors who are exposed to different SiteSpect Campaigns or Variation Groups. As a result, you can visualize the factors that have the greatest effect on your visitors' actions, making it easy to uncover the ‘why’ behind your tests.

From the SessionCam Search dashboard, you can filter data using the following options:

The last field allows you to break the search down further.

And be as granular as you like:

In addition to being able to filter data in various areas of the console (recording, heatmaps, and so on) you can also run reports.

SiteSpect Data in SessionCam

Once you have finished the SessionCam setup, you will start receiving Sitespect Campaign and Variation IDs.

The example Advanced Filters you can use to filter recordings by these values are:

"Field Value" for "SiteSpect A/B Test - Campaign" is "Exactly" "123456789".
"Field Value" for "SiteSpect A/B Test - Variation" is "Exactly" "1234567".