Integrate Wingify with Hotjar(ContentSquare)

Overview

The Wingify and Hotjar integration allows you to send Wingify campaign and variation data directly into your Hotjar account. By bridging these two platforms, you can seamlessly connect the quantitative data of your A/B tests with the qualitative behavioral insights provided by Hotjar’s session recordings and heatmaps.

Prerequisites

You must have:

• Active accounts with both Wingify and Hotjar.
• Wingify SmartCode installed on your website.
• Hotjar Tracking Code installed on the same website.

Configuration and Setup

To use the integration, you must first enable it at the workspace (account) level, and then enable it for the specific campaigns you wish to track.

Step 1: Enable Hotjar Integration at the Workspace Level

1. Log in to your Wingify dashboard.
2. Navigate to Configurations > Integrations from the left-hand menu.
3. Search for Hotjar and click on the corresponding tile.
4. Click Create Connection.
5. In the right panel that appears, click Send campaign data to Hotjar.
6. Provide the name of the connection in the Connection Name field and Create Connection.

Step 2: Enable Hotjar for a Specific Campaign

To integrate Wingify with Hotjar for a specific campaign:

1. Go to the desired campaign under Web Experimentation.
2. Select the Configuration tab.
3. In the left menu, click Integrations.
4. Find Hotjar in the list of third-party products and select the corresponding checkbox.
5. Click Save.

When you enable the integration, Wingify utilizes Hotjar's Event API to pass data. Whenever a visitor becomes part of a Wingify campaign, Wingify sends an Event to Hotjar formatted as a specific string.

View report on Hotjar;

Once the integration is active and your campaign is running, you can filter your Hotjar data using the Wingify events.

Filter Hotjar Data by Wingify Variation

To view Hotjar session recordings or heatmaps only for visitors who saw a particular Wingify variation, follow these steps:

1. Access your Hotjar account.
2. Go to Recordings or Heatmaps using the left-hand navigation menu.
3. Click the Add Filter button, located above the list of recordings.
   
4. From the filter dropdown menu, choose Event.
   
5. In the search field, enter your Wingify identifier in this specific format: wingify-[Experiment-ID]-[Variation-ID]. (For example: wingify-36-1).
6. Click Apply.
   

Hotjar will then display only the recordings or heatmaps for sessions where visitors were exposed to that exact Wingify variation.

Recommended Best Practices

• Keep a mapping document: Keep a reference sheet of your Wingify Campaign IDs, Variation IDs, and what those variations actually represent (e.g., wingify-39-1 = Red Button). This makes it easier for your team to search in Hotjar without constantly cross-referencing Wingify.
• Allow data processing time: After launching a test, wait for Hotjar to capture, process, and display the recordings before attempting to filter by Wingify events.

Troubleshooting

FAQs

• Where do I find my Wingify Campaign ID and Variation ID? 
  The Campaign ID is located in the URL of your Wingify dashboard while you are viewing the campaign (for example, if the URL contains /campaigns/39/, the ID is 39). The ID for the Control is always 1, Variation 2 is ID 2, Variation 3 is ID 3, and so on.
   
• Will this integration work retroactively for past campaigns? 
  No. Wingify can only push event data to Hotjar for active sessions from the moment the integration is enabled and saved for a running campaign.
   
• Will enabling this slow down my website? 
  The integration simply pushes a small text string (an event) to the existing Hotjar script. It does not load any heavy additional external scripts.