Category: Live Signals
This integration is only available for Web projects and these are the third parties this integration supports sending signals to:
-
ForeSee
-
FreshChat
-
Heap Analytics
-
Namogoo Customer Journey OS
-
Qualaroo
-
Ubix Labs
What to expect
The integration allows for segmentation based on user interactions like rage-clicking, constant hovering, repeated scrolling and fraudulent activity. These signals can also be sent to other 3rd party tools in real-time.
What we collect
Dynamic Variables
| Key | Value | Data Type |
| LS_Rage click | {DOM Path} | Text |
| LS_Consecutive click | {DOM Path} | Text |
| LS_JavaScript error caused by click | {DOM Path} | Text |
| LS_Repetitive hovering | {DOM Path} | Text |
| LS_Mouse shakes | {URL} | Text |
| LS_Exit intent | {URL} | Text |
| LS_Excessive loading time | {Time in milliseconds} | Number |
| LS_Excessive pastes | {DOM Path} | Text |
| LS_Excessive reloads | {URL} | Text |
| LS_Excessive clicks | {DOM Path} | Text |
| LS_Repeated Scrolling | {URL} | Text |
| LS_Ad blocker detected | {URL} | Text |
Implementation
Implementation Steps
Visit How to request an integration, follow instructions to begin enabling, and return here once completed.
Signal Options
You can choose from these supported signals:
Friction Signals
| Signal | Description |
| Rage Clicks | Clicking rapidly X times within Y milliseconds |
| Consecutive Clicks | Clicking on the same element X times consecutively within Y seconds |
| Repetitive Hovering | Hovering over the same element X times within Y seconds |
| Repeated Scrolling | Scrolling to X% of the page and then back up to Y% of the page Z times |
| JavaScript Errors Caused By Clicks | Whenever a click causes a JS error within X seconds |
| Mouse Shakes | Accelerating the mouse left and right or up and down within X milliseconds |
| Exit Intent | Leaving the top document window after X seconds of being on the page |
| Excessive Load Time |
First Contentful Paint of more than X seconds and repeats Y times
|
Fraud Signals
| Signal | Description |
| Excessive Pasting | Pasting in same defined field & session X times |
| Excessive Reloading | Reloading a defined page(s) in same session X times |
| Excessive Clicks | Clicking on the same defined element X times in a page view |
Ad Block Signal
| Signal | Description |
| Ad Blocker Detected | Whenever an Ad Blocker is detected within X seconds. |
Namogoo Signals (for Namogoo clients only)
| Signal | Description |
| CPU Strength Score (1-5) | Whenever the CPU Strength Score has a score of X or less. |
| Network Strength Score (1-5) | Whenever the Network Strength Score has a score of X or less. |
Each signal has the option of overriding the default threshold values that are set.
Here are the defaults for each which you can request to have changed if need be.
| Signal | Type | Default | Event Name |
| Rage Clicks Threshold |
number
|
4 | rage_click_signal |
|
milliseconds
|
750 | rage_click_signal | |
|
Consecutive Click Threshold
|
number
|
5 | consecutive_click_signal |
|
|
milliseconds
|
5000 | consecutive_click_signal |
|
Javascript Errors Caused By Click Timeout Threshold
|
milliseconds | 2000 | js_error_signal |
|
Repetitive Hovering Threshold
|
number
|
5 | repetitive_hovering_signal |
|
Repetitive Hovering Timer Threshold
|
milliseconds
|
10000 | repetitive_hovering_signal |
|
Repeated Scrolling Threshold
|
number
|
2 | repeated_scrolling_signal |
|
Repeated Scrolling Minimum Percent Threshold
|
percent | 10 | repeated_scrolling_signal |
|
Repeated Scrolling Maximum Percent Threshold
|
percent | 85 | repeated_scrolling_signal |
|
Mouse Shakes Timer Threshold
|
milliseconds |
350
|
mouse_shakes_signal
|
|
Mouse Shakes Acceleration Threshold
|
acceleration |
0.01
|
mouse_shakes_signal
|
|
Exit Intent Timer Threshold
|
milliseconds
|
10000 | exit_intent_signal |
|
Excessive Loading Time Threshold
|
milliseconds
|
7000 |
excessive_loading_time_signal
|
|
Excessive Loading Time Amount Threshold
|
number
|
5 |
excessive_loading_time_signal
|
|
Excessive Pastes Threshold
|
number
|
10 | excessive_pastes_fraud_signal |
|
Excessive Reloads Threshold
|
number
|
20 | excessive_reloads_fraud_signal |
|
Excessive Clicks Threshold
|
number
|
10 | excessive_clicks_fraud_signal |
|
Ad Blocker Timer Threshold
|
milliseconds | 2000 | adblocker_signal |
|
CPU Strength Score Threshold (Namogoo)
|
number | 1 |
cpu_strength_score
|
|
Network Strength Score Threshold (Namogoo)
|
number | 1 |
network_strength_score
|
Defining CSS Selectors
Fraud Signals
If you use the fraud signals then you need to define the following:
For the Excessive Reloads module you need to define a part of the URL where you want this module to run.
It is recommended to only set this condition to run on pages that have a credit card or voucher field.
For the Excessive Pastes and Excessive Clicks modules you need to define CSS selectors such as Class Names / IDs / Data Attributes of input fields which you would like to track pasting in or clicking on. It is recommended to use classnames that are unique to these fields. You can put as many comma separated selectors as you need but best to keep it to credit card or voucher input fields as that is where fraud takes place. If your company deals with insurance claims then perhaps all fields in the insurance claim form should be included in this. For the URL conditions please use pipe | separators.
Other Signals
For all signals you have the option of setting CSS selectors or JavaScript expressions to make the scope of the detection more specific and to only apply to certain pages and/or certain elements.
CSS Selector Format
It accepts the standard format that is used by document.querySelector()
| CSS Selector | Example |
| ID | #submit |
| Classes | .form-fields |
| Data Attributes | [data-header-label='Sign In'] or [data-header-label] |
| DOM Path |
body > div#root > div:nth-of-type(2) > main#content > div > a:nth-of-type(1) |
So for example the click listener will only detect the selector based on the last node which in this case is the SPAN element which is inside a BUTTON element. So let's say your selector exists on the BUTTON element ([data-testid='configurator-next']) but you want a signal to be detected on the BUTTON and the SPAN inside it, then you need to request that option to be enabled else it will never detect the selector.
Get CSS Selectors
In order to easily define CSS selectors to be provided to Contentsquare for Live Signal tracking, you can install this Chrome extension.
1. Once installed, right-click on the new extension icon in your browser and click 'Options':
2. On the options page change the Get CSS Selectors to 'Enabled' and click 'Save Settings'.
3. Go to the page that you want to get the CSS selectors from (refresh if the page was already open).
4. Click on any element on the page, especially the ones you are interested in tracking with Live Signals and you will see a draggable modal in the top left of the screen showing the element type and the CSS selectors associated with it.
Ex: Clicking a CTA button, as you see in the modal, shows the tag type and the CSS selectors associated with it.
5. Click on the CSS selectors that you want to use and it will copy them to the clipboard.
If for some reason the page redirects after you click it then once the page loads it will automatically show the last detected CSS selectors in blue.
The moment you click on another element it will then show the new element information you clicked on and change back to red and so on.
6. Please then provide the selectors you want to track to the team who will configure this for you in your Contentsquare account and let them know which Live Signals it is for. If the selectors will be the same for multiple signals, then please specify that. Don't forget to disable this option once completed else it will track on all sites you go to.
Alerting Options
With signals you have the option to choose where to send these signals, such as to Contentsquare for segmentation and also to some 3rd party products that we currently support. Should there be another product you would like to send to but don't see it in the list then feel free to request it via support and we can look into developing it.
If you would like to send these signals to Contentsquare then you can choose from sending them as either or both of these:
- Dynamic Variables
- Page Events (these appear in the event stream of playback sessions)
Here are the options for 3rd parties we support sending signals to:
-
ForeSee
-
FreshChat
-
Heap Analytics
-
Namogoo Customer Journey OS
-
Qualaroo
-
Ubix Labs
Special Instructions
Dispatch JS Custom Events
If you choose the CustomEvent option then you will need to define an event listener in your code on the window scope and listen for the custom event named Contentsquare_LiveSignal
This is the code to use.
window.addEventListener(
"Contentsquare_LiveSignal",
function (e) {
//In the event detail property you will find the signal object that was dispatched.
//Simply push that object to wherever you need.
//console.log(e.detail);
},
false
);
Once the listener receives an event, the payload will look like this in the detail property:
Write to DataLayer
If your Data Layer is not named dataLayer then please provide the name to CS.
This is an example of what the payload will look like when added to the Data Layer.
Adobe Experience Platform
- TenantID (required)
- Alloy object name (only if not using the default name which is alloy)
- Dataset ID (optional)
In AEP you will need to configure a schema like this:
Define a property called contentsquare_live_signal which will contain the signals data and needs to be configured in the xdm schema. Please also set an optional flag for the following sub-properties of contentsquare_live_signal.
event
target
xpath
page
error_message
cs_replay_link
It should look something like this:
The payload you will receive in AEP will look like this.
Amplitude
In your Amplitude CDP look for the events that have contentsquare_live_signal
Go to the Unexpected events option in the Data section.
Then add the event to your tracking plan. Note that each live signal can have different properties and some have the same as each other, so make sure not to block them.
You can then name it something like Contentsquare Live Signals
Next go to the Analytics section of Amplitude and you can then create a new chart analysis for example. Choose the event contentsquare_live_signal and then select where then select the property called event and find the options you want for live signals such as rage_click_signal.
Kameleoon
Configure the Custom Data option like this:
It is mandatory that you use this name only for the Custom data name: ContentsquareLiveSignals
If any other name or format is put there then it will not work.
You can then configure segments to include the name of the signals you want to take actions on.
Optimizely Data Platform
In order to use this in Optimizely Data Platform you need to first create a new Field in the Events section.
Go to Account Settings > Administration > Objects & Fields and click the 'Create New Field' button.
Choose Events in the Object Containing New Field drop down menu.
Then insert this display name in Field Display Name: Contentsquare Live Signal
Then insert this exact name in Field Name: contentsquare_live_signal
Choose Text as the Field Type.
Press Save and then you can use the Event Inspector to check if the signals are coming in properly.
Go to Account Settings then Event Inspector and press Start Inspector. Then look through events until you find a contentsquare_live_signal event.
It will look like this:
Optimizely Web
In order to use this in Optimizely Web you need to create a new custom user attribute.
In your Optimizely Web account access the Audiences section then click on Attributes then Create New Attribute.
Choose the Custom Attribute option.
In the Attribute Name field type Contentsquare Live Signal and in the API Name field type the following exactly the same: ContentsquareLiveSignal - then press Save. You don't need the code.
You can now create an audience based on the different signals. Click on Saved then Create New Audience.
Find the Contentsquare Live Signal attribute under Custom Attributes and drag it to the left.
Insert the name of the live signal event that you want, based on the list mentioned above. If any of the names have been changed then you need to use the new names here.
You can now press save and use that audience in your tests.
Qualtrics
This requires an intercept to display manually with custom JavaScript. If you don't already have a manual intercept on your site then you would need to create a new Website App & Feedback intercept and connect it to whichever survey you want for this. You would need to deploy the separate intercept tag for it to work.
Tealium Event Stream
If you use a different profile name to what is in the Tealium Data Layer then provide it to CS.
The profile name can be taken from here:
If you want to define a custom Data Source then please create a Javascript Data Source, then provide CS with the Data Source Key.
Verifying it works
Test Live Signals
Using the same Chrome extension as above you can also test the Live Signals you have enabled by enabling this option in the Options of the extension:
Then go to the page which you have enabled the Live Signals on and start to test the signals by attempting to trigger it based on the different behaviors and thresholds that are set. If you need to change those thresholds please inform the support team.
Once you trigger a live signal it will appear in this modal that will popup.
Note that each signal is only triggered once per session, so if you want to re-test the same signal you have already triggered then you need to clear the session storage items.
Check data being sent to Contentsquare if enabled
You can also check that the data is being sent by using the Contentsquare Tracking Setup Assistant Chrome extension.
You will notice that the values sent are usually of the element that triggered the signal or the page that it triggered on, depending on which signal triggered. You can then filter by specific elements that triggered signals to see which triggered the most. You can also group them into one using a Regex.
If you chose to send the values as Page Events then it will look something like this.
Page Events are shown in the playback event stream.
Once completed you will be able to see the results in Contentsquare as Dynamic Variables or Page Events, depending if you enabled these.
Check data being sent to 3rd parties
Bloomreach Engagement
In your Bloomreach account go to Data & Assets --> Customers to find the live signal data.
Braze
In your Braze account you can see the signals in the Custom Events section.
They will also be available for scheduling campaigns and segment targeting:
Dynamic Yield
In your Dynamic Yield account you can create an audience based on each live signal by going to the Audiences section and then defining a condition based on either an Event trigger or an Event trigger by property. If the latter is chosen then simply choose the Contentsquare Live Signal event and manually type in the name of the signal property such as rage_click_signal. The naming is based on the defaults mentioned in this document for each signal. If the default has been changed then you need to use the changed naming convention.
Gleap
In your Gleap account you will be able to see the signals showing in the Custom Data section of each workflow.
This data will also be available in the Gleap Data Export.
Google Analytics 4
In your GA4 account you will be able to see the signals showing in the Realtime section under events.
And in the events view.
Also in the Explore view.
Intercom
In your Intercom account you will see the live signal appearing in the chat user properties section.
Karte
If you chose Karte as a 3rd party to send signals to then you will see it like this in the Events section:
If you chose Karte as a 3rd party to send signals to then you will see it like this in the Events section:
LiveChat
If you chose LiveChat you can see the signal event displayed in the custom variables section of the chat.
LivePerson Conversational Cloud
In your LivePerson account you will find the live signals showing inside the Searched content section of the chat and chat reports.
Segment
If you chose Segment as a 3rd party to send signals to then you will see it like this:
Sentry
If you chose Sentry as a 3rd party to send signals to then you will see it like this in the Issues section:
Tealium
If you chose Tealium as a 3rd party to send signals to then you will see it like this:
Zendesk Chat
If you chose Zendesk Chat as a 3rd party then when a signal triggers it will open the chat window for the visitor and in the chat agent side they will see this: