Details
Integration Type | Dynamic Variable Prefix |
Live Signals | LS_ |
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.
Implementation
Please go to the section How to request an integration to see the instructions to enable this integration. You can then return here once completed.
You will need to inform your CSM or support as to which components you want enabled as everything is off by default.
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 |
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. |
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 | Value | Event Name |
Rage Click Threshold |
number
|
4 | rage_click_signal |
Consecutive Click Threshold
|
number
|
5 | consecutive_click_signal |
Javascript Errors Caused By Click Timeout Threshold
|
milliseconds | 2000 | js_error_signal |
Repetitive Hovering Threshold
|
number
|
4 | repetitive_hovering_signal |
Repetitive Hovering Timer Threshold
|
milliseconds
|
30000 | 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 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 Override
|
milliseconds | 2000 | adblocker_signal |
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 DOM JavaScript expression of any kind which returns true and then it will run. You can use regex also.
It is recommended to only set this condition to run on pages that have a credit card or voucher field. You can make the JavaScript expression the URL or any other DOM object that lets it know to only run in this context.
For example (see screenshot also):
document.location.href.indexOf("payment_page") > -1
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.
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
CSS Selector | Indicator | Example |
Class Name | . | .form-fields |
ID | # | #submit |
Data Attribute | ! | !myDataAttr |
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.
Once installed, right click on the new extension icon in your browser and click on Options:
In the options page change the "Get CSS Selectors for Live Signals" to Enabled and press Save Settings.
Go to the page that you want to get the CSS selectors from (refresh if the page was already open).
Then 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.
For example I clicked the black then blue then red button in order and as you see in the modal it shows (in reverse order) the element and the CSS selectors associated with them.
You can then just click on the CSS selectors that you want to copy to the clipboard and it will automatically copy it for you or you can highlight and manually copy the exact selector you will use.
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.
Note that you shouldn't use the entire string of CSS selectors detected but rather specific ones that you want. If you send the whole string as is then all individual selectors will be applied which means it can affect other elements that share those CSS selectors such as class names.
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
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)
If you would like to send these signals to 3rd parties that we support then these are the options of which you can send to multiple at the same time if you need:
-
Dispatch JS CustomEvent (see below for usage instructions)
- Tealium (Event Stream)
-
Adobe Experience Platform (provide CS with your TenantID & alloy object name)
- Karte
- Dynamic Yield
- Segment
- Optimizely
- Sentry
- Kameleoon (requires configuration in Kameleoon, see instructions below)
- Qualtrics (requires intercept to display manually with custom JavaScript - no data is sent but it triggers a survey invite)
Dispatch JS CustomEvent Usage Instructions
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
In the payload you will find the signal object inside the event detail property.
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 );
Verifying it works
You can check that the data is being sent by using the 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.
Adobe Experience Platform
You will need to provide CS with your TenantID & alloy object name if you set a custom name for it.
In AEP you will need to configure a schema like this:
Define a property called contentsquare_live_signal which will contains 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.
Segment
If you chose Segment as a 3rd party to send signals to then you will see it like this:
Tealium
If you chose Tealium as a 3rd party to send signals to then you will see it like this:
Karte
If you chose Karte as a 3rd party to send signals to then you will see it like this in the Events section:
Sentry
If you chose Sentry as a 3rd party to send signals to then you will see it like this in the Issues section
Kameleoon
If you chose Kameleoon as a 3rd party to send signals to then you will need to 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 upon.
It is important to note that the names of the signals need to match exactly what you have in the Contentsquare Live Signals settings. The defaults are mentioned in the Defaults section above. Should you rename them then you need to also rename it in the Kameleoon segment definition.
Dynamic Variable Possibilities
Var Key | Var Type |
LS_Rage clicks | Text |
LS_Consecutive Clicks | Text |
LS_JavaScript error caused by click | Text |
LS_Repetitive hovering | Text |
LS_Mouse shakes | Text |
LS_Excessive pastes | Text |
LS_Excessive reloads | Text |
LS_Excessive clicks | Text |
LS_Repeated Scrolling | Text |
LS_Ad blocker detected | Text |