Live Signals 🧪

This is an early access beta integration

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