Integrating SiteSpect and Clicktale

SiteSpect integrates with many different analytics solutions that allow you to make sense of the data you collect with your Campaigns. SiteSpect’s Web Analytics Tag Transformation and Segmentation (WATTS) feature allows you to dynamically insert tracking information about website visitors into tracking tags used by all major web analytics programs. The tracking includes information about various SiteSpect elements including Visits, Campaigns, viewed Variations, and more.

Key features of our integration include:

• No performance penalty
• No additional server calls
• Highly reliable results
• Forty configurable macros
• Extremely flexible configuration

The steps listed here describe SiteSpect's integration with Clicktale. These instructions are intended for a user who has some experience with HTML and JavaScript and who has the correct permissions to implement code changes on your website.

High-Level Integration Steps

Clicktale tracks and reports on traffic to your website using both heatmaps and rich visualizations. The integration is implemented by adding a JavaScript snippet to the HTML page. The snippet is executed in the browser and can read information from the page.

SiteSpect exists in the flow of traffic and can put essential data on the page before the Clicktale tag is executed. As a result, SiteSpect can dynamically insert various information about the visit and visitor, such as Campaign Assignment or viewed Variations, directly into the Clicktale tracking tag. SiteSpect WATTS functionality modifies the original HTML so you can modify existing tags and insert new ones. Once you have completed the integration, you can view, segment, and analyze SiteSpect Campaign data with Clicktale, which provides the “why” behind your tests.

To integrate SiteSpect and Clicktale, you’ll need to take these steps. Each of these is described in more detail in later sections of this document:

1. Set up Clicktale
2. Set up SiteSpect WATTS Site Variation
3. Validate the Integration
4. Set up Clicktale’s Dashboards with SiteSpect Data

Set up Clicktale

Clicktale is implemented with JavaScript tracking code that is inserted into your HTML pages. Refer to your Clicktale documentation for detailed instructions. You can verify that Clicktale is on the page by checking your page source code. Once the integration is established, SiteSpect automatically notifies Clicktale which Campaigns and Variations each visitor is exposed to.

Set up a SiteSpect WATTS Site Variation

SiteSpect’s powerful search and replace engine transforms HTML in the flow of traffic. To send SiteSpect data to Clicktale, set up 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 filled when the Variation is applied.

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

1. Select New, Global Variation.

   

   • Name the Global Variation Clicktale 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 has added 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 we want to make these changes only on HTML pages and not for other content.

In addition, it has specified 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 injecting 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 Clicktale, create the ss_watts variable and pass each campaign and variation to Clicktale:

1. Edit the Site Variation in SiteSpect to include the dimension you created in Clicktale. To do so:
   1. Select Components, Global Variations, then choose the Site Variation you created above called Clicktale Integration.
   2. Expand the Search & Replace area of the page by clicking the right arrow next to Search & Replace.
   3. In the Replacement Text field, after the visitor’s counted CampaignIDs and VariationGroupIDs are stored as a string in the variable ss_watts, you need to iterate through them and send them to Clicktale using a ClickTaleEvent, which is a method that is available from the Clicktale library on the page.

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:

<script>
var ss_watts = "__SS_LISTCAMPAIGNCOUNTED{__SS_TCID__:__SS_VGID__}{,}__";
ss_watts.split(",").forEach(function(i){
    var testCampaignID = i.split(":")[0];
    var variationGroupID = i.split(":")[1];
    ClickTaleEvent("testCampaignID:" + testCampaignID);
    ClickTaleEvent("variationGroupID:" + variationGroupID);
});
</script></body>

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

2. Click Save at the bottom of the page.

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

Validate the Integration

There are two steps you can take to validate that the integration is set up correctly and that SiteSpect is actually sending data to Clicktale:

1. Validate that SiteSpect is injecting the correct code.
2. Verify that SiteSpect is successfully sending data to Clicktale.

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

1. While still on the Site Variation page, open the Preview Settings area and select any Campaign from the As if Assigned To drop-down.
2. Click Preview at the bottom of the page. This launches a new tab with changes applied to the page.
3. 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 Clicktale, take a look at event actions associated with recent recordings. You can see these attributes within the Clicktale Session Player under actions while the recording is being played back.

Set up Clicktale’s Dashboards With SiteSpect Data

SiteSpect’s integration with Clicktale 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 affect on your visitors' actions, making it easy to uncover the ‘why’ behind your tests.

From the Clicktale Search dashboard, under Behavioral Filters, select Events to open a dialog that lists all your Clicktale events. There you can filter specifically by SiteSpect Campaign ID or Variation Group ID. Clicktale Enterprise customers can also set up a filter report to display the aggregate behavior of your visitors by SiteSpect Campaign. To do this, open a heatmap report and select Edit, Events, and Page Events. This shows you a listing of captured page events that you can use to generate the required report.

Need More? Use Our Professional Services Team

Our integration with Clicktale is extremely flexible; if you have particular objectives that aren’t met by this configuration, we are available to help. Integration with an analytics platform is included as part of your SiteSpect on-boarding, so be sure to speak to your SiteSpect Professional Services team to help you design and implement the right integration for your team.