Legacy Integration Snippets
This reference can be used to support migrations, as a helper to identify old code snippets installed in our customers' ecosystem. These snippets need to be removed and can be found:
- In our customers' tag manager in the vast majority of cases
- In our customers' code base
- In our customers' third-party tool configuration (e.g. in AB Tasty or Optimizely)
6Sense
Implementation
The following code should be deployed site wide via TMS.
Set the trigger to be the window loaded event.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: 6Sense CS Integration
*Version: 1.5
*/
(function () {
function init(context) {
var props = ["domain", "country_iso_code", "annual_revenue", "sic", "name", "country", "city", "state", "naics", "employee_count", "employee_range", "industry", "revenue_range", "naics_description", "sic_description", "region"];
var tvp = "ABM_6S_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
}
function beautifyVar(variableText) {
var breakText = variableText.split('_');
var beautifiedName = '';
for (var i = 0; i < breakText.length; i++) {
beautifiedName += breakText[i].charAt(0).toUpperCase() + breakText[i].slice(1) + ' ';
}
return (beautifiedName.trim());
}
function start6Sintegration() {
setTimeout(function () {
if (window.localStorage && localStorage["_6senseCompanyDetails"]) {
try {
var details = JSON.parse(localStorage["_6senseCompanyDetails"]);
if (details && details.company) {
var dc = details.company;
for (var i = 0; i < props.length; i++) {
if (dc[props[i]]) {
var val = dc[props[i]];
if (!isNaN(val)) {
val = parseInt(val);
}
var key = beautifyVar(props[i]);
if (key === "Name") {
key = "Company Name";
}
if (val) {
sendToCS(key, val);
}
}
}
}
} catch (e) {}
}
}, 500);
}
var integrationStarted = false;
var _6si = window._6si;
if (_6si) {
start6Sintegration();
} else {
Object.defineProperty(window, "_6si", {
configurable: true,
get: function () {
return _6si;
},
set: function (n) {
_6si = n;
if (!integrationStarted) {
integrationStarted = true;
start6Sintegration();
}
}
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init(context);
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("6Sense");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//6Sense CS Integration End
//remove script tag if needed
</script>Verifying it works
You can use the chrome extension to check the results are sent to CS
Adobe Analytics
General principles
Contentsquare allows you to use your Adobe Analytics segments in every Contentsquare modules (Journey Analysis, Page Comparator, Zoning Analysis, Session Replay). Currently, the connector works only with data warehouse compatible segments. To check the compatibility of your segments, go to Adobe Analytics and check the "Product Compatibility" of your segment.
To import your segments, you need to add a snippet of code to your website. This code pushes an identifier to Adobe Analytics. It helps us match Adobe Analytics sessions with Contentsquare one's.
Implementation
To implement the connector, add the code below:
window._uxa = window._uxa || [];
window._uxa.push(["afterPageView", function(context) {
var s = typeof s_gi=='function' ? s_gi('XXXreportSuiteXXX') : null;
if(s && context.pageNumber==1){
s.eVarXXXeVarNumberXXX=context.sessionKey;
s.tl(true,'o','ContentSquare','eVarXXXeVarNumberXXX');
}
}]);- XXXreportSuiteXXX shall be replaced by the ID of the report suite you wish to track.
- XXXeVarNumberXXX shall be replaced by the number of an eVar of your choice. The eVar must be enable in Adobe Analytics.
Also, this eVar should only be use by Contentsquare.
How to check if the implementation is successful?
To check the implementation, add this extension in Chrome Debugger for Adobe Analytics.
Navigate to your website, activate the Debugger for Adobe Analytics extension and open the Google Chrome Console. You shall see something similar to the image below. If not, the implementation failed. Contact your CSM to update it.
Connector impact on bounce rate
To import your segments, our connector generates a second call to Adobe Analytics after the first pageview call. This second call can impact your Adobe bounce rate KPI. Since Adobe bounce rate is calculated as no additional calls after the first one, if a user visits a page and don't perform a second action, it will still not count as a bounce due to the second call made by Contentsquare.
As a work-around, you can create a new segment and filter out the Contentsquare call. You should use this report as your new bounce rate. Your Adobe Analytics representative (consultant or customer care) can provide you other options specific to your account.
AB Tasty
Implementation
There are 2 options to implement the code:
- Using ABTasty Global code and remove the script tags at first and last line
- Using a Tag Management System by using a custom tag container and setting trigger to be window loaded (remove the script tags if needed)
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: AB Tasty CS Integration
*Version: 1.9
*/
(function () {
function init() {
var tvp = "AB_ABT_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
}
function dispatch(key, redirect) {
var prefix = "";
if (!redirect) {
prefix = ABTasty.getTestsOnPage()[key];
} else {
prefix = ABTasty.results[key];
}
setTimeout(function () {
var campaignName = prefix.name;
var variationName = prefix.variationName;
if (!variationName) {
variationName = "Variation 1";
}
sendToCS(campaignName, variationName);
}, 5);
}
function startABTintegration() {
setTimeout(function () {
if (ABTasty.results) {
if (ABTasty.redirectedFrom) {
var redirectTestID = ABTasty.redirectedFrom.testID;
if (redirectTestID) {
dispatch(redirectTestID, true);
}
}
for (var key in ABTasty.results) {
if (ABTasty.results.hasOwnProperty(key)) {
var result = ABTasty.results[key];
if (result.status === "accepted") {
dispatch(key);
} else {
(function (key) {
var status = result.status;
Object.defineProperty(result, "status", {
configurable: true,
get: function () {
return status;
},
set: function (newStatus) {
status = newStatus;
if (status === "accepted") {
dispatch(key);
}
}
});
})(key);
}
}
}
}
}, 500);
}
var integrationStarted = false;
var ABTasty = window.ABTasty;
if (ABTasty) {
startABTintegration();
} else {
Object.defineProperty(window, "ABTasty", {
configurable: true,
get: function () {
return ABTasty;
},
set: function (n) {
ABTasty = n;
if (!integrationStarted) {
integrationStarted = true;
startABTintegration();
}
}
});
}
}
function callback() {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("AB Tasty");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//AB Tasty CS Integration End
//remove script tag if needed
</script>Verifying it works
You can check that the data is being sent for your campaign by using the Chrome extension, it should look like the below:
Adobe Target
Implementation
There are two ways to integration Contentsquare with Adobe Target:
- If you’re already creating segments in Adobe for your different test experiences, then you can use the Adobe Analytics integration to import those segments. See the Adobe Analytics here.
- You can integrate directly with Adobe Target. This integration adds code to the main at.js Adobe Target tag. Details below.
Step 1
-
Log into Adobe Target then select “Setup” from the navigation and select “Implementation”.
-
Pick the version you are using on your site and click “Edit Settings”.
Step 2
Scroll to the bottom of the page, copy all of the supplied code and then paste it into the “Library Footer” box and click Save.
The Code
/*
*Name: Adobe Target CS Integration
*Version: 1.0
*/
function isEmpty(val) {
return val === undefined || val == null || val.length <= 0 ? true : false;
}
function key(obj) {
return Object.keys(obj)
.map(function (k) {
return k + "" + obj[k];
})
.join("");
}
function distinct(arr) {
var result = arr.reduce(function (acc, e) {
acc[key(e)] = e;
return acc;
}, {});
return Object.keys(result).map(function (k) {
return result[k];
});
}
document.addEventListener(adobe.target.event.REQUEST_SUCCEEDED, function (e) {
window.ttMETA = typeof window.ttMETA != "undefined" ? window.ttMETA : [];
var tokens = e.detail.responseTokens;
if (isEmpty(tokens)) {
return;
}
var uniqueTokens = distinct(tokens);
uniqueTokens.forEach(function (token) {
window.ttMETA.push({
CampaignName: token["activity.name"],
CampaignId: token["activity.id"],
RecipeName: token["experience.name"],
RecipeId: token["experience.id"],
OfferId: token["option.id"],
OfferName: token["option.name"],
});
});
});
//Adobe Target CS Integration End
Step 3
Depending on the version of at.js that you use, click "Download at.js x.x.x".
The new at.js will be downloaded to your browser. Replace the existing at.js library on your site with the new one.
Step 4
Select Response Tokens
Toggle the status to on for both experience.name and activity.name.
Step 5
Add the follow code in your Tag Management System (remove the script tags if needed)
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Adobe Target CS Integration
*Version: 1.6
*/
(function () {
function init() {
var tvp = "AB_AT_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
}
function startATintegration() {
setTimeout(function () {
for (var i = 0; i < ttMETA.length; i++) {
var campaignName = "";
var variationName = "";
if (ttMETA[i]["CampaignName"] && ttMETA[i]["RecipeName"]) {
campaignName = ttMETA[i]["CampaignName"];
variationName = ttMETA[i]["RecipeName"];
} else if (ttMETA[i]["campaign"] && ttMETA[i]["experience"]) {
campaignName = ttMETA[i]["campaign"];
variationName = ttMETA[i]["experience"];
}
if (campaignName && variationName) {
sendToCS(campaignName, variationName);
}
}
}, 500);
}
var integrationStarted = false;
var ttMETA = window.ttMETA;
if (ttMETA) {
startATintegration();
} else {
Object.defineProperty(window, "ttMETA", {
configurable: true,
get: function () {
return ttMETA;
},
set: function (n) {
ttMETA = n;
if (!integrationStarted) {
integrationStarted = true;
startATintegration();
}
},
});
}
}
function callback() {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Adobe Target");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Adobe Target CS Integration End
//remove script tag if needed
</script>Your integration is now complete! All tests from this point forwards will send data to the Contentsquare Dynamic Variables.
Important — As this integration changes the at.js file which will run across the whole site, test this thoroughly before pushing it live to ensure no copy and paste errors have been made.
Verifying it works
You can check that the data is being sent for your campaign by using the Chrome extension, it should look like the below:
Amigo Technology
How to deploy
Amigo uses a series of plugins to execute experiments. Amigo have developed a specific plugin to integrate with Contentsquare.
To deploy the integration, ** contact your Amigo account manager and your Contentsquare CSM.**
AppDynamics
Requirements
For this integration to work you will need to have the AppDynamics RUM (Real User Monitoring) tag on all the pages of your site.
Click here to access their RUM documentation.
Implementation
The following code should be deployed site wide via TMS.
Set the trigger to be the window loaded event.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: AppDynamics CS Integration
*Version: 1.5
*/
(function () {
var tvp = "APM_AD_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
}
function init(context) {
if (context && context.pageNumber === 1 && context.sessionKey) {
function startIntegration() {
setTimeout(function () {
function execute() {
var isRecording = _uxa.push(["isRecording"]);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet && uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid) {
var intLink = "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=ad";
var sessionKey = context.sessionKey;
sendToCS("SessionID", sessionKey);
var getVPVdata = "";
var isFunc = false;
if (window["adrum-config"].userEventInfo && window["adrum-config"].userEventInfo.VPageView) {
var vpv = window["adrum-config"].userEventInfo.VPageView;
if (typeof vpv === "function") {
isFunc = true;
getVPVdata = window["adrum-config"].userEventInfo.VPageView();
} else {
getVPVdata = window["adrum-config"].userEventInfo.VPageView;
}
var checkLength = Object.keys(getVPVdata);
if (checkLength === 0) {
getVPVdata.userData = {};
}
} else {
window["adrum-config"].userEventInfo = {};
window["adrum-config"].userEventInfo.VPageView = {};
window["adrum-config"].userEventInfo.VPageView.userData = {};
getVPVdata = window["adrum-config"].userEventInfo.VPageView;
}
getVPVdata.userData.ContentsquareReplay = intLink;
getVPVdata.userData.ContentsquareSID = sessionKey;
window["adrum-config"].userEventInfo.VPageView = getVPVdata;
if (isFunc) {
window["adrum-config"].userEventInfo.VPageView = function (context) {
return getVPVdata;
};
}
(function (config) {
if (config.spa && config.spa.spa2) {
ADRUM.markVirtualPageBegin("contentsquare-session-replay", false);
} else {
var vpv = new ADRUM.events.VPageView({
url: "contentsquare-session-replay",
});
vpv.start();
vpv.markViewChangeStart();
vpv.markViewChangeEnd();
vpv.markViewDOMLoaded();
vpv.markXhrRequestsCompleted();
vpv.end();
ADRUM.report(vpv);
}
})(window["adrum-config"] || (window["adrum-config"] = {}));
}
}
}
}
var executed = false;
var adrumConfig = window["adrum-config"];
if (adrumConfig) {
execute();
} else {
Object.defineProperty(window, "adrum-config", {
configurable: true,
get: function () {
return adrumConfig;
},
set: function (n) {
adrumConfig = n;
if (!executed) {
executed = true;
execute();
}
},
});
}
});
}
var integrationStarted = false;
var ADRUM = window.ADRUM;
if (ADRUM) {
startIntegration();
} else {
Object.defineProperty(window, "ADRUM", {
configurable: true,
get: function () {
return ADRUM;
},
set: function (n) {
ADRUM = n;
if (!integrationStarted) {
integrationStarted = true;
startIntegration();
}
},
});
}
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init(context);
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("AppDynamics");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//AppDynamics CS Integration End
//remove script tag if needed
</script>Verifying it works
You can use the chrome extension to check the session ID is sent to CS.
Note that it will only send this once per session on the very first pageview, so to test this you will need to delete cookies then reload.
You can then also check that you find the Contentsquare replay link inside AppDynamics by checking the following places:
Note that you will only see a replay link for visitors who had Contentsquare Session Replay active.
The % depends on the ratio your account has, you can have that increased by talking to your CSM.
Go to Experiences then choose the relevant option in Browser Apps:
In User Experience go to Sessions then find the ContentsquareReplay option in the User Data filter and enable it to see it as a column.
It will only have a replay link for visitors who had Contentsquare Session Replay active:
Blue Triangle
Requirements
For this integration to work you will need to have the Blue Triangle RUM (Real User Monitoring) tag on all the pages of your site.
Click here to access their documentation.
You will also need to contact Blue Triangle and request that they enable the Contentsquare integration API in your tag. This is required bttUT.ctGif.
Implementation
The following code should be deployed site wide via TMS.
Set the trigger to be the window loaded event.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Blue Triangle CS Integration
*Version: 1.10
*/
(function () {
function init(context) {
var tvp = "APM_BT_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
}
if (context && context.pageNumber === 1) {
function startBTintegration() {
setTimeout(function () {
var isRecording = _uxa.push(["isRecording"]);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet && uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid) {
var replayLink = "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=bt";
if (typeof bttUT.ctGif === "function") {
bttUT.ctGif({
csPID: pid,
csReplayURL: replayLink,
});
}
}
}
}
if (bttUT.sessionID) {
sendToCS("SessionID", bttUT.sessionID);
}
}, 500);
}
var integrationStarted = false;
var bttUT = window.bttUT;
if (bttUT) {
startBTintegration();
} else {
Object.defineProperty(window, "bttUT", {
configurable: true,
get: function () {
return bttUT;
},
set: function (n) {
bttUT = n;
if (!integrationStarted) {
integrationStarted = true;
startBTintegration();
}
},
});
}
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init(context);
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Blue Triangle");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Blue Triangle CS Integration End
//remove script tag if needed
</script>Verifying it works
You can use the chrome extension to check the session ID is sent to CS.
Note that it will only send this once per session on the very first pageview, so to test this you will need to delete cookies then reload.
Check inside the Blue Triangle platform for the replay link:
It will only have a replay link for visitors who had Contentsquare Session Replay active:
If you don't see it there then contact your Blue Triangle technical contact and ask them to check this with the integration developer.
Brightcove Player
Implementation
Add the code below to your tag manager.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
Add this code to a custom HTML tag in GTM or another TMS.
Remove the script tags if required by your TMS.
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Brightcove Player CS Integration
*Version: 1.7
*/
(function () {
function init() {
var tvp = "VA_BCP_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
}
function startBCintegration() {
setTimeout(function () {
var videos = window.videojs.getAllPlayers();
videos.forEach(function (video) {
setListeners(video);
});
function setListeners(video) {
function getVID() {
return video.tagAttributes['data-video-id'];
}
function dispatch(e) {
sendToCS(e, "Video ID : " + getVID());
}
var onPlay = false;
video.on("play", function () {
if (!onPlay) {
onPlay = true;
dispatch("Video started");
}
});
var onPause = false;
video.on("pause", function (e) {
if (!onPause) {
onPause = true;
dispatch("Video paused");
}
});
var onEnded = false;
video.on("ended", function () {
if (!onEnded) {
onEnded = true;
dispatch("Video completed");
}
});
var firstQtrComplete = false;
var secondQtrComplete = false;
var thirdQtrComplete = false;
var fourthQtrComplete = false;
video.on("timeupdate", function (e) {
if (!e.target.player.cache_ || !e.target.player.cache_.currentTime) {
return;
}
var playbackPercent = (e.target.player.cache_.currentTime / e.target.player.cache_.duration) * 100;
var result = Math.floor(playbackPercent);
if (result > 25 && !firstQtrComplete) {
firstQtrComplete = true;
sendToCS("Video play view duration", "Video ID : " + getVID() + " : 25%");
}
if (result > 50 && !secondQtrComplete) {
secondQtrComplete = true;
sendToCS("Video play view duration", "Video ID : " + getVID() + " : 50%");
}
if (result > 75 && !thirdQtrComplete) {
thirdQtrComplete = true;
sendToCS("Video play view duration", "Video ID : " + getVID() + " : 75%");
}
if (result === 100 && !fourthQtrComplete) {
fourthQtrComplete = true;
sendToCS("Video play view duration", "Video ID : " + getVID() + " : 100%");
}
});
var onAdsLoad = false;
video.on("ads-load", function (e) {
if (!onAdsLoad) {
onAdsLoad = true;
dispatch("Ad loaded");
}
});
var onAdsStarted = false;
video.on("ads-ad-started", function (e) {
if (!onAdsStarted) {
onAdsStarted = true;
dispatch("Ad started");
}
});
var onAdsPlay = false;
video.on("ads-play", function (e) {
if (!onAdsPlay) {
onAdsPlay = true;
dispatch("Ad play");
}
});
var onAdsEnded = false;
video.on("ads-ad-ended", function (e) {
if (!onAdsEnded) {
onAdsEnded = true;
dispatch("Ad completed");
}
});
var onAdsPause = false;
video.on("ads-pause", function (e) {
if (!onAdsPause) {
onAdsPause = true;
dispatch("Ad paused");
}
});
var onAdsFirstQuartile = false;
video.on("ads-first-quartile", function (e) {
if (!onAdsFirstQuartile) {
onAdsFirstQuartile = true;
sendToCS("Ad play view duration", "Video ID : " + getVID() + " : 25%");
}
});
var onAdsMidPoint = false;
video.on("ads-midpoint", function (e) {
if (!onAdsMidPoint) {
onAdsMidPoint = true;
sendToCS("Ad play view duration", "Video ID : " + getVID() + " : 50%");
}
});
var onAdsThirdQuartile = false;
video.on("ads-third-quartile", function (e) {
if (!onAdsThirdQuartile) {
onAdsThirdQuartile = true;
sendToCS("Ad play view duration", "Video ID : " + getVID() + " : 75%");
}
});
var onAdsClick = false;
video.on("ads-click", function (e) {
if (!onAdsClick) {
onAdsClick = true;
dispatch("Ad clicked");
}
});
var onAdsError = false;
video.on("error", function (e) {
if (!onAdsError) {
onAdsError = true;
dispatch("Video error");
}
});
}
}, 500);
}
var integrationStarted = false;
var videojs = window.videojs;
if (videojs) {
startBCintegration();
} else {
Object.defineProperty(window, "videojs", {
configurable: true,
get: function () {
return videojs;
},
set: function (n) {
videojs = n;
if (!integrationStarted) {
integrationStarted = true;
startBCintegration();
}
}
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Brightcove Player");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Brightcove Player CS Integration End
//remove script tag if needed
</script>Verifying it works
You can check that the data is being sent for your videos by using the Chrome extension, it should look like the below:
Once completed you will be able to see the results in Contentsquare like this:
Convert
Implementation
Add the follow code via your Tag Management System by using a custom tag container (remove the script tags if needed)
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Convert CS Integration
*Version: 1.0
*/
(function () {
function init() {
var tvp = "AB_CV_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
};
function startIntegration() {
window._conv_q = window._conv_q || [];
_conv_q.push([function () {
setTimeout(function () {
if (window.convert && convert.currentData && convert.currentData.experiments && convert.data && convert.data.experiments) {
var experimentKeys = Object.keys(convert.currentData.experiments);
for (var i = 0; i < experimentKeys.length; i++) {
var experienceName = convert.data.experiments[experimentKeys[i]].n;
var variationName = convert.currentData.experiments[experimentKeys[i]].variation_name;
sendToCS(experienceName, variationName);
}
}
}, 500);
}]);
}
var integrationStarted = false;
var _conv_q = window._conv_q;
if (_conv_q) {
startIntegration();
} else {
Object.defineProperty(window, "_conv_q", {
configurable: true,
get: function () {
return _conv_q;
},
set: function (n) {
_conv_q = n;
if (!integrationStarted) {
integrationStarted = true;
startIntegration();
}
}
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Convert");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Convert CS Integration End
//remove script tag if needed
</script>How to use the integration
Verifying it works
You can check that the data is being sent for your campaign by using the Chrome extension, it should look like the below:
Datadog
Requirements
For this integration to work you will need to have the Datadog RUM (Real User Monitoring) tag on all the pages of your site.
Click here to access their RUM documentation.
Implementation
The following code should be deployed site wide via TMS.
Set the trigger to be the window loaded event.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Datadog CS Integration
*Version: 1.1
*/
(function() {
var tvp = "APM_DD_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
}
function init(context) {
if (context && context.pageNumber === 1) {
function startIntegration() {
var isRecording = _uxa.push(['isRecording']);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet && uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid) {
var intLink = "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=dd";
if (DD_RUM.getInternalContext && DD_RUM.addUserAction) {
var sessionID = DD_RUM.getInternalContext().session_id;
sendToCS("SessionID", sessionID);
DD_RUM.addUserAction('Contentsquare', {
"ContentsquareReplay": intLink
});
}
}
}
}
}
var integrationStarted = false;
var DD_RUM = window.DD_RUM;
if (DD_RUM) {
startIntegration();
} else {
Object.defineProperty(window, "DD_RUM", {
configurable: true,
get: function() {
return DD_RUM;
},
set: function(n) {
DD_RUM = n;
if (!integrationStarted) {
integrationStarted = true;
startIntegration();
}
}
});
}
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init(context);
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Datadog");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Datadog CS Integration End
//remove script tag if needed
</script>Verifying it works
You can use the chrome extension to check the session ID is sent to CS.
Note that it will only send this once per session on the very first pageview, so to test this you will need to delete cookies then reload.
You can then also check that you find the Contentsquare replay link inside Datadog by checking the following places:
Note that you will only see a replay link for visitors who had Contentsquare Session Replay active.
The % depends on the ratio your account has, you can have that increased by talking to your CSM.
Go to RUM Analytics and filter by whatever you want, let’s say Errors:
After clicking on the relevant error spike that you would like to investigate you will see this:
Select View events and you should get a list of the events:
Clicking on whichever one is chosen will show you this and then you can select Go to View:
Inspect whatever you need to inspect there and then select Go to Session:
Every Session that was collected should contain this Custom action:
After clicking on it you should find the replay link:
Demandbase
Implementation
The following code should be deployed site wide via TMS.
Set the trigger to be the window loaded event.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Demandbase CS Integration
*Version: 1.6
*/
(function () {
function init() {
var tvp = "ABM_DB_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
};
function dispatch(key, val) {
sendToCS(key, val);
};
function startDBintegration() {
setTimeout(function () {
if (Demandbase.IpApi && Demandbase.IpApi.CompanyProfile && Demandbase.IpApi.CompanyProfile.information_level) {
var prefix = Demandbase.IpApi.CompanyProfile;
if (prefix.information_level === "Basic") {
dispatch("Information Level", "Basic");
} else if (prefix.information_level === "Detailed") {
dispatch("Information Level", "Detailed");
}
if (prefix.annual_sales) {
dispatch("Annual Sales", prefix.annual_sales);
}
if (prefix.audience) {
dispatch("Audience", prefix.audience);
}
if (prefix.audience_segment) {
dispatch("Audience Segment", prefix.audience_segment);
}
if (prefix.b2b) {
dispatch("B2B", prefix.b2b);
}
if (prefix.b2c) {
dispatch("B2C", prefix.b2c);
}
if (prefix.company_name) {
dispatch("Company Name", prefix.company_name);
}
if (prefix.demandbase_sid) {
dispatch("SID", prefix.demandbase_sid);
}
if (prefix.employee_count) {
dispatch("Employee Count", prefix.employee_count);
}
if (prefix.employee_range) {
dispatch("Employee Range", prefix.employee_range);
}
if (prefix.forbes_2000) {
dispatch("Forbes 2000", prefix.forbes_2000);
}
if (prefix.fortune_1000) {
dispatch("Fortune 1000", prefix.fortune_1000);
}
if (prefix.industry) {
dispatch("Industry", prefix.industry);
}
if (prefix.revenue_range) {
dispatch("Revenue Range", prefix.revenue_range);
}
if (prefix.sub_industry) {
dispatch("Sub Industry", prefix.sub_industry);
}
if (prefix.traffic) {
dispatch("Traffic", prefix.traffic);
}
if (prefix.watch_list_account_status) {
dispatch("Watch List Account Status", prefix.watch_list_account_status);
}
if (prefix.watch_list_account_type) {
dispatch("Watch List Account Type", prefix.watch_list_account_type);
}
}
}, 500);
}
var integrationStarted = false;
var Demandbase = window.Demandbase;
if (Demandbase) {
startDBintegration();
} else {
Object.defineProperty(window, "Demandbase", {
configurable: true,
get: function () {
return Demandbase;
},
set: function (n) {
Demandbase = n;
if (!integrationStarted) {
integrationStarted = true;
startDBintegration();
}
}
});
}
}
function callback() {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Demandbase");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Demandbase CS Integration End
//remove script tag if needed
</script>Verifying it works
You can use the chrome extension to check the results are sent to CS
DLPO (Japan)
Implementation
Add the follow code via your Tag Management System by using a custom tag container (remove the script tags if needed)
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: DLPO CS Integration
*Version: 1.7
*/
(function () {
function init() {
var tvp = "AB_DLPO_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
}
function startDLPintegration() {
setTimeout(function () {
for (var i = 0; i < objDLPOLink.length; i++) {
if (objDLPOLink[i].TestName && objDLPOLink[i].VariationName) {
var campaignName = objDLPOLink[i].TestName;
var variationName = objDLPOLink[i].VariationName;
if (campaignName && variationName) {
sendToCS(campaignName, variationName);
}
}
}
}, 500);
}
var integrationStarted = false;
var objDLPOLink = window.objDLPOLink;
if (objDLPOLink) {
startDLPintegration();
} else {
Object.defineProperty(window, "objDLPOLink", {
configurable: true,
get: function () {
return objDLPOLink;
},
set: function (n) {
objDLPOLink = n;
if (!integrationStarted) {
integrationStarted = true;
startDLPintegration();
}
},
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("DLPO");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//DLPO CS Integration End
//remove script tag if needed
</script>Verifying it works
You can check that the data is being sent for your campaign by using the Chrome extension, it should look like the below:
Dynamic Yield
Implementation
Step 1
Log into Dynamic Yield then expand “Settings” and select “Integrations”
Step 2
Select “Custom” and then select “Edit”.
Step 3
In the pop-up that appears make sure “Variation Impression” is ticked and then copy all of the following code and paste it into the text box. Click “Save”.
The Code
function afterVariationSelected(tagId, tagName, experienceName, experience, variations, isNoAction) {
/*
*Name: Dynamic Yield CS Integration
*Version: 1.11
*/
var tvp = "AB_DY_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
}
function startDYintegration() {
var campaignName = "";
var variationName = "";
if (typeof experience === "object" && experience.hasOwnProperty("name")) {
if (typeof variations === "object" && variations[0].hasOwnProperty("name")) {
campaignName = experience.name;
variationName = variations[0].name;
if (campaignName && variationName) {
sendToCS(decodeURI(campaignName), decodeURI(variationName));
}
}
}
}
function callback() {
if (!disableCallback) {
disableCallback = true;
startDYintegration();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Dynamic Yield");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
//Dynamic Yield CS Integration End
}
Step 4
Confirm that the integration is enabled. The integration can now be applied to any test or personalisation campaign!
Step 5
Select the test or personalisation campaign you want to track (below is an example of a Dynamic Content campaign). Expand “Advanced Settings” and ensure that “Execute custom integrations” is enabled. That’s it! Dynamic Yield will now pass data to Contentsquare for what the visitor saw.
Verifying it works
You can use the chrome extension to check the dynamic variables are sent to CS.
Dynatrace
Requirements
For this integration to work you will need to have the Dynatrace RUM (Real User Monitoring) tag on all the pages of your site.
Click here to access their documentation.
Implementation
The following code should be deployed site wide via TMS.
Set the trigger to be the window loaded event.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Dynatrace CS Integration
*Version: 1.7
*/
(function () {
function init(context) {
var tvp = "APM_DT_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
window._uxa = window._uxa || [];
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
}
CS_CONF.integrations_handler = CS_CONF.integrations_handler || {};
var isRecording = _uxa.push(["isRecording"]);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet && uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid) {
var intLink = "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=dt";
CS_CONF.integrations_handler.replaylink = intLink;
}
}
}
var sessionKey = context.sessionKey;
sendToCS("SessionID", sessionKey);
CS_CONF.integrations_handler.sessionID = sessionKey;
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init(context);
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Dynatrace");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Dynatrace CS Integration End
//remove script tag if needed
</script>Configuration in Dynatrace
In the Dynatrace portal, navigate to the Application section on the left menu.
Select the application where you want to set up the Contentsquare integration.
Once in the application, select the three dots (…) in the top right to bring up the application settings.
Under the application settings, expand the “Capturing” menu and select the “Session and Action Properties”.
Once in the Session and Action Properties screen, select “Add property”.
Switch the property selection to “Custom Defined Property”.
Under Expression Type, select capture source. Select JavaScript.
Select data type (string) and string length set to 200.
Insert CS_CONF.integrations_handler.replaylink as the variable
Input the Display Name from the property that will be visible in the portal.
Make sure to name it: Contentsquare Replay
Selecting “Ignore Do Not Track” will allow us to capture this value from users who have Do Not Track enabled in their browser.
If left untoggled, we will not capture the value for browsers with Do Not Track enabled.
Select “Store as Session Property” and “First Value”. This will grab one value for the entirety of the session and use the first value it finds.
Save the property.
Repeat the steps above to create another property and set the JavaScript variable this time to be CS_CONF.integrations_handler.sessionID with length 100 and name it Contentsquare SID.
If the RUM tag is set to automatically update, the property capture will begin within minutes. If the tag is set to manual update mode, an update will be required to set the property.
Verifying it works
You can use the chrome extension to check the session ID is sent to CS.
Note that it will only send this once per session on the very first pageview, so to test this you will need to delete cookies then reload.
Check inside the Dynatrace platform for the replay link:
It will only have a replay link for visitors who had Contentsquare Session Replay active:
In any session you should see a CS replay link.
Foresee
Requirements
To make use of the replay feature you need to have 100% collection ratio, talk to your CSM about this.
Implementation
The following code should be deployed site wide via TMS.
The following code can be deployed after the Contentsquare tag.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: ForeSee CS Integration
*Version: 1.16
*/
(function () {
function init() {
var tvp = "FB_FS_";
var sendArtificialPageviews = true;
function sendToCS(csKey, csValue, csEventType, csPV) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
if (csEventType === "etr") {
_uxa.push(["trackEventTriggerRecording", csKey]);
} else if (csEventType === "reg") {
_uxa.push(["trackPageEvent", csKey + " | " + csValue]);
}
if (csPV && sendArtificialPageviews) {
_uxa.push(["trackPageview", window.location.pathname + "?" + csPV]);
}
}
function startFSIntegration() {
setTimeout(function () {
if (window.fsReady) {
fsReady(function () {
var isRecording = _uxa.push(["isRecording"]);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet && uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid && FSR.CPPS && FSR.CPPS.set) {
var replayLink = "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=fs";
FSR.CPPS.set("ContentsquareReplay", replayLink);
}
}
}
if (FSR.onInviteShown) {
FSR.onInviteShown.subscribe(
function (e) {
if (e) {
if (e.uid) {
sendToCS("Feedback Invite Displayed", "Survey ID : " + e.uid, 0, "cs_foresee=feedback_invite_displayed");
} else {
sendToCS("Feedback Invite Displayed", "true", 0, "cs_foresee=feedback_invite_displayed");
}
}
},
true,
true
);
}
if (FSR.onInviteAccepted) {
FSR.onInviteAccepted.subscribe(
function (e) {
if (e) {
if (e.uid) {
sendToCS("Feedback Invite Submitted", "Survey ID : " + e.uid, "etr", "cs_foresee=feedback_invite_submitted");
} else {
sendToCS("Feedback Invite Submitted", "true", "etr", "cs_foresee=feedback_invite_submitted");
}
}
},
true,
true
);
}
if (FSR.onFeedbackShown) {
FSR.onFeedbackShown.subscribe(
function (e) {
sendToCS("Feedback Displayed", "true", 0, "cs_foresee=feedback_displayed");
},
true,
true
);
}
if (FSR.onFeedbackSubmitted) {
FSR.onFeedbackSubmitted.subscribe(
function (e) {
if (e) {
if (e.mid) {
sendToCS("Feedback Submitted", "Survey ID : " + e.mid, "etr", "cs_foresee=feedback_submitted");
} else {
sendToCS("Feedback Submitted", "true", "etr", "cs_foresee=feedback_submitted");
}
if (e.rating) {
sendToCS("Feedback Rating", parseInt(e.rating));
}
}
},
true,
true
);
}
});
}
}, 500);
}
var integrationStarted = false;
var FSR = window.FSR;
if (FSR) {
startFSIntegration();
} else {
Object.defineProperty(window, "FSR", {
configurable: true,
get: function () {
return FSR;
},
set: function (n) {
FSR = n;
if (!integrationStarted) {
integrationStarted = true;
startFSIntegration();
}
},
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("ForeSee");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Foresee CS Integration End
//remove script tag if needed
</script>If you want to disable the artificial pageviews that are sent then simply change sendArtificialPageviews to false in the code.
Verifying it works
Note that depending on which Foresee Survey type you are using, each will have it's own values sent to Contentsquare. There is a difference between an auto-invite campaign and a user manually clicking on the Feedback link.
You can check that the data is being sent for your surveys by using the Chrome extension, it should look like the below:
This shows that an artificial pageview was sent when the feedback invite was presented and also a dynamic variable was sent with the feedback details.
This shows that an artificial pageview was sent when the feedback invite was submitted and also a dynamic variable was sent with the feedback details.
This shows that an artificial pageview was sent when the feedback popup was displayed after clicking the feedback link and also a dynamic variable was sent with the feedback details.
This shows that an artificial pageview was sent when the feedback popup was submitted and also a dynamic variable was sent with the feedback details. It includes the ratings selected but only works for this type of survey, it does not work for auto-invite surveys.
In Contentsquare you can find these variables by searching like this:
If you are using the replay feature then you should see the ContentsquareReplay link in the User Data section of your survey responses in your Foresee account.
FreshChat
Requirements
To make use of the replay feature you need to have 100% collection ratio, talk to your CSM about this.
Implementation
The following code should be deployed site wide via TMS.
The following code can be deployed after the Contentsquare tag.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: FreshChat CS Integration
*Version: 1.11
*/
(function () {
function init() {
var tvp = "CH_FC_";
var sendArtificialPageviews = true;
function sendToCS(csKey, csValue, csEventType, csPV) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
if (csEventType === "etr") {
_uxa.push(["trackEventTriggerRecording", csKey]);
} else if (csEventType === "reg") {
_uxa.push(["trackPageEvent", csKey + " | " + csValue]);
}
if (csPV && sendArtificialPageviews) {
_uxa.push(["trackPageview", window.location.pathname + "?" + csPV]);
}
}
function startFCIntegration() {
setTimeout(function () {
fcWidget.on("widget:opened", function (resp) {
sendToCS("Chat Opened", "true", 0, "cs_freshchat=chat_opened");
});
fcWidget.on("user:created", function (resp) {
if (resp && resp.success === true && resp.status == 200) {
sendToCS("Chat Started", "true", "etr", "cs_freshchat=chat_started");
}
var isRecording = _uxa.push(["isRecording"]);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet && uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid) {
var replayLink = "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=fc";
fcWidget.user.setProperties({
"Contentsquare Replay": replayLink,
});
}
}
}
});
}, 500);
}
var integrationStarted = false;
var fcWidget = window.fcWidget;
if (fcWidget) {
startFCIntegration();
} else {
Object.defineProperty(window, "fcWidget", {
configurable: true,
get: function () {
return fcWidget;
},
set: function (n) {
fcWidget = n;
if (!integrationStarted) {
integrationStarted = true;
startFCIntegration();
}
},
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("FreshChat");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//FreshChat CS Integration End
//remove script tag if needed
</script>If you want to disable the artificial pageviews that are sent then simply change sendArtificialPageviews to false in the code.
Verifying it works
You can check that the data is being sent for your chats by using the Chrome extension, it should look like the below:
This shows that an artificial pageview was sent when the chat opened and also a dynamic variable was sent.
This shows that an artificial pageview was sent when the chat started and also a dynamic variable was sent.
In Contentsquare you can find these variables by searching like this:
If you are using the replay feature then you should see this in your chat responses in your FreshChat account.
You can then create segments like this to find all chats that have replays:
GetFeedback Digital (Usabilla)
Requirements
To make use of the replay feature you need to have 100% collection ratio, talk to your CSM about this.
Implementation
The code below should be deployed through your tag management system.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: GetFeedback Digital (Usabilla) CS Integration
*Version: 1.19
*/
(function () {
function init() {
var tvp = "FB_UB_";
var sendArtificialPageviews = true;
function sendToCS(csKey, csValue, csEventType, csPV) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
if (csEventType === "etr") {
_uxa.push(["trackEventTriggerRecording", csKey]);
} else if (csEventType === "reg") {
_uxa.push(["trackPageEvent", csKey + " | " + csValue]);
}
if (csPV && sendArtificialPageviews) {
_uxa.push(["trackPageview", window.location.pathname + "?" + csPV]);
}
}
function startUBIntegration() {
setTimeout(function () {
var usbIframe = document.getElementById("lightningjs-frame-usabilla_live");
function getUSBCallback() {
var usbCallback = usbIframe.contentWindow.usabilla_live_settings.eventCallback;
return usbCallback;
}
if (usbIframe && usbIframe.contentWindow && usbIframe.contentWindow.usabilla_live_settings) {
var newUSBcallback = (function () {
var cachedCallback = getUSBCallback();
return function (category, action, label, value, userData) {
if (cachedCallback) {
cachedCallback.apply(this, arguments);
}
var ud = userData;
if (action == "Feedback:Open" || action === "Campaign:Open") {
var isRecording = _uxa.push(["isRecording"]);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet && uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid) {
var intLink = "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=ub";
if (usbIframe.contentWindow.usabilla_live_settings.local_data && usbIframe.contentWindow.usabilla_live_settings.local_data.custom) {
usbIframe.contentWindow.usabilla_live_settings.local_data.custom.ContentsquareReplay = intLink;
}
}
}
}
}
if (action == "Feedback:Open") {
sendToCS("Feedback Displayed (All Surveys)", "true", 0, "cs_usabilla=feedback_displayed");
}
if (action === "Feedback:Success") {
sendToCS("Feedback Submitted (All Surveys)", "true", "etr", "cs_usabilla=feedback_submitted");
if (ud) {
var getFeedbackKeys = Object.keys(ud);
for (var f = 0; f < getFeedbackKeys.length; f++) {
var fbName = getFeedbackKeys[f];
var fbValue = ud[getFeedbackKeys[f]];
var fbCSkey = "";
if (fbName != "email" && fbName != "comment" && fbName != "custom") {
if (fbName === "rating") {
fbCSkey = "Feedback Mood Rating";
} else if (fbName === "nps") {
fbCSkey = "Feedback NPS Rating";
} else if (fbName === "performance") {
fbCSkey = "Feedback Performance Rating";
}
if (!isNaN(fbValue)) {
fbValue = parseInt(fbValue);
}
if (fbCSkey && fbValue) {
sendToCS(fbCSkey, fbValue);
}
}
}
}
}
if (action === "Campaign:Open") {
sendToCS("Campaign Displayed", label, 0, "cs_usabilla=campaign_displayed_" + label);
}
if (action === "Campaign:Page Switch") {
if (ud) {
if (ud.data) {
var getCampaignKeys = Object.keys(ud.data);
for (var i = 0; i < getCampaignKeys.length; i++) {
var cmpName = getCampaignKeys[i];
var cmpValue = ud.data[getCampaignKeys[i]];
var cmpCSkey = "";
if (cmpName != "email") {
if (cmpName === "mood") {
cmpCSkey = "Campaign Mood Rating";
} else if (cmpName === "nps") {
cmpCSkey = "Campaign NPS Rating";
} else {
cmpCSkey = cmpName;
}
if (typeof cmpValue === "object") {
var getCampaignSubKeys = Object.keys(cmpValue);
for (var s = 0; s < getCampaignSubKeys.length; s++) {
var cmpSubName = getCampaignSubKeys[s];
var cmpSubValue = cmpValue[getCampaignSubKeys[s]];
if (!isNaN(cmpSubValue)) {
cmpSubValue = parseInt(cmpSubValue);
}
if (isNaN(cmpSubName)) {
if (cmpCSkey && cmpSubName && cmpSubValue) {
sendToCS(cmpCSkey + " " + cmpSubName, cmpSubValue);
}
}
}
} else {
if (!isNaN(cmpValue)) {
cmpValue = parseInt(cmpValue);
}
if (cmpCSkey && cmpValue) {
sendToCS(cmpCSkey, cmpValue);
}
}
}
}
}
}
}
if (action === "Campaign:Success") {
sendToCS("Campaign Submitted", label, "etr", "cs_usabilla=campaign_submitted_" + label);
}
};
})();
window.usabilla_live("setEventCallback", newUSBcallback);
}
}, 500);
}
var integrationStarted = false;
var usabilla_live = window.usabilla_live;
if (usabilla_live) {
startUBIntegration();
} else {
Object.defineProperty(window, "usabilla_live", {
configurable: true,
get: function () {
return usabilla_live;
},
set: function (n) {
usabilla_live = n;
if (!integrationStarted) {
integrationStarted = true;
startUBIntegration();
}
},
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("GetFeedback Digital (Usabilla)");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//GetFeedback Digital (Usabilla) CS Integration End
//remove script tag if needed
</script>If you want to disable the artificial pageviews that are sent then simply change sendArtificialPageviews to false in the code.
Google Optimize
Implementation
First check if perhaps you already have the required components set right already before using one of the methods below.
Open your browser console on a page that you have a GO test running live and type in gaData then press enter and expand the object.
If the object has an experiment in there then you do not need to pick a method below, you can skip straight to the code
If not then pick one of the methods below.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
Method 1: GA launched from your TMS and GO code inline
If your configuration of Google Optimize is set inline in the source of your code and you have the mandatory "require" component, as described in this article from Google then you can simply add the code below.
An example of what is required:
Method 2: GA and GO launched from GTM
This integration method requires that your Google Analytics and Google Optimize are both launched from your Google Tag Manager account using the built in GA and GO tag containers. If this is not how you have things set up then skip to Method 3.
If you already have a GTM custom variable called “Google Analytics Settings” defined, even with a different name, and you also have a Page View trigger defined then skip the next few steps which explain how to create it and go straight to Configuring the “Google Analytics Settings” variable in Analytics below.
Creating a “Google Analytics Settings” variable
Create a “Google Analytics Settings” Variable if you don’t have one. In GTM go to Variables and press New.
Click to create a new variable configuration.
Scroll down to Utilities and select the “Google Analytics Settings” option.
Insert your Google Analytics Tracking ID which looks similar to this below.
Press Save and name the variable Google Analytics Settings or whatever else you want to call it.
Creating a “Page View” trigger
Next make sure you have a Trigger called Page View. If not go to Triggers and add a new one.
Click to create a new trigger configuration.
Choose Page View.
Press Save and name it Page View.
Configuring the “Google Analytics Settings” variable in Analytics
The next part assumes you already have the Google Analytics and Google Optimize code containers set up already but not configured properly for the Integration to work.
Open Google Analytics Universal Analytics and press the edit icon.
Then in Google Analytics Settings choose the variable you created (or already possibly had) called Google Analytics Settings.
It is quite possible that you have this checkbox enabled but you will need to disable it.
Then select Advanced Settings and make sure the tag firing options is set to Once per page and set the Tag Sequencing to Fire a tag before GA fires and set that tag to be Google Optimize.
The Google Analytics triggering rule must be set to the Page View trigger you created or unless you already have it set that way.
You should have this then:
Configuring the “Google Analytics Settings” variable in Optimize
Next go to the Google Optimize tag container and edit it
Then in Google Analytics Settings choose the variable you created (or already possibly had) called Google Analytics Settings.
It is quite possible that you have this checkbox enabled but you will need to disable it.
You should have this then:
Note there must be no firing triggers for Optimize container.
After publishing the config changes you should now see the gaData object populating with the Experiment and Variation ID in the browser:
Next take the code from the section below.
Method 3: GA and GO launched from a different TMS (not GTM)
If you have the GTM dataLayer object available then simply adding the code below might allow it to work.
There can be cases where it won't work so if it does not work then contact Contentsquare support.
The Code
Add this code to a custom HTML tag in GTM or another TMS. Remove the script tags if required by your TMS.
Set the trigger to be the window loaded event.
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Google Optimize CS Integration
*Version: 1.10
*/
(function () {
function init() {
var tvp = "AB_GO_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
}
function dispatch(key, val) {
if (key && val) {
sendToCS(key, val);
}
}
function gtagPatch() {
dataLayer.push(arguments);
}
function startGOIntegration() {
setTimeout(function () {
var useGAdataObject = false;
for (var i in gaData) {
if (!useGAdataObject) {
if (gaData.hasOwnProperty(i)) {
var gaDataIexperiments;
if (gaData[i].experiments) {
useGAdataObject = true;
}
}
}
}
var campaignName = "";
var variationName = "";
if (useGAdataObject) {
var gaDataKeys = Object.keys(gaData);
for (var i = 0; i < gaDataKeys.length; i++) {
if (gaData[gaDataKeys[i]].experiments) {
var getExperiments = gaData[gaDataKeys[i]].experiments;
var getExperimentKeys = Object.keys(getExperiments);
for (var j = 0; j < getExperimentKeys.length; j++) {
var experimentKey = getExperimentKeys[j];
campaignName = experimentKey;
variationName = gaData[gaDataKeys[i]].experiments[experimentKey];
dispatch(campaignName, variationName);
}
}
}
} else {
var dls = document.location.search;
if (dls.indexOf("utm_expid=.") > -1) {
var getTests = decodeURIComponent(dls.substr(dls.indexOf("utm_expid=") + 11).split("&")[0]);
if (getTests) {
campaignName = getTests.split(".")[0];
variationName = getTests.split(".")[1];
dispatch(campaignName, variationName);
}
} else if (window.dataLayer) {
var execute = (window.gtag) ? gtag : gtagPatch;
execute('event', 'optimize.callback', {
callback: function (value, name) {
if (name && value) {
campaignName = name;
variationName = value;
dispatch(campaignName, variationName);
}
}
});
}
}
}, 500);
}
var integrationStarted = false;
var gaData = window.gaData;
if (gaData) {
startGOIntegration();
} else {
Object.defineProperty(window, "gaData", {
configurable: true,
get: function () {
return gaData;
},
set: function (n) {
gaData = n;
if (!integrationStarted) {
integrationStarted = true;
startGOIntegration();
}
}
});
}
}
function callback() {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Google Optimize");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Google Optimize CS Integration End
//remove script tag if needed
</script>Verifying it works
You can check that the data is being sent for your campaign by using the Chrome extension, it should look like the below:
Once completed you will be able to contact your Implementation Manager who can confirm they are seeing the variants in Contentsquare, after which your CSM/Product Specialist will help you make use of them for analysis.
Heap Analytics
Implementation
The following code should be deployed site wide via TMS.
Set the trigger to be the window loaded event.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Heap Analytics CS Integration
*Version: 1.9
*/
(function () {
function init() {
var tvp = "AN_HE_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
};
function startHAIntegration() {
setTimeout(function () {
if (heap.appid) {
sendToCS("App ID", heap.appid);
}
if (heap.userId) {
sendToCS("User ID", heap.userId);
}
var isRecording = _uxa.push(['isRecording']);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet && uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid && heap.addUserProperties) {
heap.addUserProperties({
"Contentsquare Replay": "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=he"
});
}
}
}
}, 500);
}
var integrationStarted = false;
var heap = window.heap;
if (heap) {
startHAIntegration();
} else {
Object.defineProperty(window, "heap", {
configurable: true,
get: function () {
return heap;
},
set: function (n) {
heap = n;
if (!integrationStarted) {
integrationStarted = true;
startHAIntegration();
}
}
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Heap Analytics");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Heap Analytics CS Integration End
//remove script tag if needed
</script>Verifying it works
You can use the chrome extension to check the results are sent to CS
HTML5-Video Player
Implementation
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
Only add this code where you have HTML5 videos embedded or only on pages that contain the videos you are interested in tracking.
The Code
By default, populated events are:
abortwaitingseekedendedpauseplayresizevolumechangeerror
Additionally we add 4 time code events - Reached 25%, Reached 50%, Reached 75%, Reached 100%.
<script type="text/javascript">
//remove script tag if needed
/*
*Name: HTML5 Video CS Integration
*Version: 1.2
*/
(function () {
function init(context) {
var videoSelectorsQuery = 'video'; // Change query to scope videos - Like '#video' or '.productVideos'
var monitoredEvents = 'abort waiting seeked ended pause play resize volumechange error timeupdate'; //Add or remove events based on what you wish to monitor.
var tvp = "VA_HT5_";
var videoFlags = {};
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
}
if (!!document.querySelector(videoSelectorsQuery)) {
startVideoIntegration(document.querySelectorAll(videoSelectorsQuery));
} else if (!!MutationObserver && typeof (MutationObserver) === 'function') {
var checkVideoExists = new MutationObserver(function (mutations, me) {
var videoObjects = document.querySelectorAll(videoSelectorsQuery);
if (videoObjects.length && !!videoObjects[0].currentSrc) {
startVideoIntegration(videoObjects);
me.disconnect();
return;
}
});
checkVideoExists.observe(document, {
childList: true,
subtree: true
});
}
function startVideoIntegration(videoArray) {
function addListenerMulti(el, s, fn) {
var eventList = s.split(' ');
for (var i = 0; i < eventList.length; i++) {
el.addEventListener(eventList[i], fn, false);
}
}
var firstQtrComplete = false;
var secondQtrComplete = false;
var thirdQtrComplete = false;
var fourthQtrComplete = false;
var onAbort = false;
var onWaiting = false;
var onSeeked = false;
var onEnded = false;
var onPause = false;
var onResize = false;
var onVolumechange = false;
var sendVar = false;
var eventName = "";
var currentlyPlayingVideo = "";
function ClearFlags() {
firstQtrComplete = false;
secondQtrComplete = false;
thirdQtrComplete = false;
fourthQtrComplete = false;
onAbort = false;
onWaiting = false;
onSeeked = false;
onEnded = false;
onPause = false;
onResize = false;
onVolumechange = false;
}
function latchEventsToVideo(videoObject, videoID, videoName) {
addListenerMulti(videoObject, monitoredEvents, function (e) {
if (e.type === 'timeupdate') {
var totalLength = videoObject.duration;
var percentageCompleted = (videoObject.currentTime / totalLength) * 100;
if (!firstQtrComplete && percentageCompleted > 25) {
firstQtrComplete = true;
sendToCS("Video play view duration", "25% : " + videoName);
}
if (!secondQtrComplete && percentageCompleted > 50) {
secondQtrComplete = true;
sendToCS("Video play view duration", "50% : " + videoName);
}
if (!thirdQtrComplete && percentageCompleted > 75) {
thirdQtrComplete = true;
sendToCS("Video play view duration", "75% : " + videoName);
}
if (!fourthQtrComplete && percentageCompleted === 100) {
fourthQtrComplete = true;
sendToCS("Video play view duration", "100% : " + videoName);
}
} else if (e.type === 'error') {
var errorText = (!!e.target && !!e.target.error && !!e.target.error.message) ? '. Error: ' + e.target.error.message : '. Undefined Error';
sendToCS("Video error", videoName + " : " + errorText);
} else {
if (!onAbort && e.type === 'abort') {
onAbort = true;
sendVar = true;
eventName = "aborted";
} else if (!onWaiting && e.type === 'waiting') {
onWaiting = true;
sendVar = true;
eventName = "waiting";
} else if (!onSeeked && e.type === 'seeked') {
onSeeked = true;
sendVar = true;
eventName = "seeked";
} else if (!onEnded && e.type === 'ended') {
onEnded = true;
sendVar = true;
eventName = "completed";
} else if (!onPause && e.type === 'pause') {
onPause = true;
sendVar = true;
eventName = "paused";
} else if (e.type === 'play' && currentlyPlayingVideo != videoName) {
currentlyPlayingVideo = videoName;
sendVar = true;
eventName = "played";
ClearFlags();
} else if (!onResize && e.type === 'resize') {
onResize = true;
sendVar = true;
eventName = "resized";
} else if (!onVolumechange && e.type === 'volumechange') {
onVolumechange = true;
sendVar = true;
eventName = "volume changed";
}
if (sendVar) {
sendToCS("Video " + eventName, videoName);
sendVar = false;
}
}
});
}
for (var i = 0; i < videoArray.length; i++) {
var videoFileName = (!!videoArray[i].currentSrc) ? /(?:.+\/)*(.+\..+)$/.exec(videoArray[i].currentSrc)[1] : '';
var videoName = (videoFileName) ? videoFileName : (videoArray[i].id) ? videoArray[i].id : 'Video' + i;
var videoID = 'Video' + i;
latchEventsToVideo(videoArray[i], videoID, videoName);
}
}
//HTML5 Video Integration CS Integration End
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init(context);
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("HTML5 Video");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//HTML5 Video CS Integration End
//remove script tag if needed
</script>Verifying it works
You can check that the data is being sent for your campaign by using the Chrome extension, it should look like the below:
Creating a segment
You can find all of the event names that were sent to Contentsquare by creating a segment using dynamic variables and typing the prefix in the search box.
Informizely
Requirements
To make use of the replay feature you need to have 100% collection ratio, talk to your CSM about this.
Implementation
There are 2 sets of code. One part is for your tag manager and the other is to be placed in your existing Informizely tag.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code - Live Site
The following code should be deployed site wide via TMS.
The following code can be deployed after the Contentsquare tag.
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Informizely CS Integration
*Version: 1.10
*/
(function () {
function dispatchReplayLink(replayLink) {
if (typeof CustomEvent != "function") {
function CustomEvent(event, params) {
params = params || {
detail: null,
};
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent(event, params.detail);
return evt;
}
window.CustomEvent = CustomEvent;
}
if (window.CustomEvent) {
var evt = new CustomEvent("Contentsquare_IN_Integration_ReplayLink", {
detail: {
replayLink: replayLink,
},
});
window.dispatchEvent(evt);
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
var tvp = "FB_IZ_";
var sendArtificialPageviews = true;
function sendToCS(csKey, csValue, csEventType, csPV) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
if (csEventType === "etr") {
_uxa.push(["trackEventTriggerRecording", csKey]);
} else if (csEventType === "reg") {
_uxa.push(["trackPageEvent", csKey + " | " + csValue]);
}
if (csPV && sendArtificialPageviews) {
_uxa.push(["trackPageview", window.location.pathname + "?" + csPV]);
}
}
var isRecording = _uxa.push(["isRecording"]);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet && uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid) {
var replayLink = "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=iz";
window.addEventListener(
"Contentsquare_IN_Integration_Launch",
function (e) {
dispatchReplayLink(replayLink);
},
false
);
dispatchReplayLink(replayLink);
}
}
}
window.addEventListener(
"Contentsquare_IN_Integration_Data",
function (e) {
if (e && e.detail && e.detail.event) {
var ed = e.detail;
var event = ed.event;
var surveyName = ed.surveyName;
var surveyId = ed.surveyId;
var api = ed.api;
if (event === "SurveyStart") {
sendToCS("Feedback Displayed", surveyName + " (" + surveyId + ")", 0, "cs_informizely=feedback_displayed_" + surveyId);
}
if (event === "ResultsSent") {
sendToCS("Feedback Submitted", surveyName + " (" + surveyId + ")", "etr", "cs_informizely=feedback_submitted_" + surveyId);
var results = api.getResults();
if (results) {
for (var i = 0; i < results.length; i++) {
var qt = results[i].questionType;
var qtxt = results[i].questionText;
var as = results[i].answerString;
if (qt === 6) {
sendToCS(surveyId + " : " + qtxt, as);
} else if (qt === 8) {
sendToCS(surveyId + " : NPS " + qtxt, parseInt(as));
} else if (qt === 9 || qt === 10) {
sendToCS(surveyId + " : " + qtxt, parseInt(as));
}
}
}
}
}
},
false
);
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Informizely");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Informizely CS Integration End
//remove script tag if needed
</script>If you want to disable the artificial pageviews that are sent then simply change sendArtificialPageviews to false in the code.
The Code - Inside Informizely Tag
The code below should be merged with your existing Informizely tag code. Do not copy paste it as is as you could overwrite what you have already.
- In your Informizely tag you probably have
window.IzWidget = window.IzWidget || {}defined already and so wrap that with the code below as you see it. - If it doesn’t exist then you can simply create it with that code.
- You may also already have this function defined
IzWidget['insitez.ready'] = function (api). - If not the define it as you see below.
- If you do have it then add the inner code into your existing function and make sure
apiis defined in the function arguments or you will need to modify the code to whatever you calledapi.
- You may already have a similar tracker like this defined already
window.IzWidget['tracker'] = csInformizelyTracker. - If so then simply add the code you see below into yours and make sure
event,surveyId,surveyName,data, andapiarguments are defined too. - If you do not have a tracker defined then simply use the tracker in the code as is.
- You can rename the tracker to whatever you like as long as both references to it as changed as you see in the code.
The important thing to note is that you need to merge the code below with the code you have.
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Informizely CS Integration
*Version: 1.3
*/
(function () {
window.IzWidget = window.IzWidget || {};
IzWidget['insitez.ready'] = function (api) {
window.addEventListener("Contentsquare_IN_Integration_ReplayLink", function (e) {
if (e && e.detail && e.detail.replayLink) {
api.set('custom', {
'ContentsquareReplay': e.detail.replayLink
});
}
}, false);
var evt = new Event("Contentsquare_IN_Integration_Launch");
window.dispatchEvent(evt);
};
function csInformizelyTracker(event, surveyId, surveyName, data, api) {
if (typeof CustomEvent != "function") {
function CustomEvent(event, params) {
params = params || {
detail: null
};
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.detail);
return evt;
}
window.CustomEvent = CustomEvent;
}
if (window.CustomEvent) {
var evt = new CustomEvent("Contentsquare_IN_Integration_Data", {
detail: {
event: event,
surveyId: surveyId,
surveyName: surveyName,
data: data,
api: api
}
});
window.dispatchEvent(evt);
}
};
window.IzWidget['tracker'] = csInformizelyTracker;
})();
//Informizely CS Integration End
//remove script tag if needed
</script>Verifying it works
You can check that the data is being sent for your surveys by using the Chrome extension, it should look like the below:
This shows that an artificial pageview was sent when the feedback was presented and also a dynamic variable was sent with the feedback details.
This shows that an artificial pageview was sent when the feedback was submitted and also a dynamic variable was sent with the feedback details. It includes the ratings selected and other options in the survey.
In Contentsquare you can find these variables by searching like this:
If you are using the replay feature then you should see the ContentsquareReplay link in the survey responses in your Informizely account.
Insider
Implementation
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Insider CS Integration
*Version: 1.0
*/
(function () {
function init() {
var tvp = "AB_IN_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
};
function startIntegration() {
setTimeout(function () {
if (Insider.fns && Insider.campaign && Insider.campaign.shownCampaigns && Insider.campaign.getBuilderIdByVariationId) {
var persObj = {};
Insider.fns.keys(Insider.campaign.shownCampaigns).map(function (key) {
var builderId = Insider.campaign.getBuilderIdByVariationId(key);
persObj[builderId] = key;
});
var persObjKeys = Object.keys(persObj);
for (var i = 0; i < persObjKeys.length; i++) {
var personalizationID = "Personalization ID : " + persObjKeys[i];
var variationID = "Variation ID : " + persObj[persObjKeys[i]]
sendToCS(personalizationID, variationID);
}
}
}, 500);
}
var integrationStarted = false;
var Insider = window.Insider;
if (Insider) {
startIntegration();
} else {
Object.defineProperty(window, "Insider", {
configurable: true,
get: function () {
return Insider;
},
set: function (n) {
Insider = n;
if (!integrationStarted) {
integrationStarted = true;
startIntegration();
}
}
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Insider");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Insider CS Integration End
//remove script tag if needed
</script>Verifying it works
You can check that the data is being sent for your campaign by using the Chrome extension, it should look like the below:
Creating a segment
You can find all of the test names that Insider sent to Contentsquare by creating a segment using dynamic variables and typing the prefix in the search box.
Interaction Studio (Formerly Evergage)
Implementation
Inside your Interaction Studio (Evergage) platform go to Web then open Site-Wide JavaScript
Insert the code below into the code box
The Code
/*
*Name: Evergage CS Integration
*Version: 1.3
*/
(function () {
var tvp = "AB_EG_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
};
Evergage.addExperienceListener(function (experienceId, statType, message) {
if (statType && statType === "i" && message) {
if (message.userGroup && (message.experienceName || message.experienceId) && (message.campaignName || message.campaignId)) {
var campaignName = message.campaignName || message.campaignId;
var variationName = message.experienceName || message.experienceId;
var userGroup = message.userGroup;
sendToCS(campaignName, variationName + ' : ' + userGroup);
}
}
});
function callback(context) {
if (!disableCallback) {
disableCallback = true;
if (window.CS_CONF) {
CS_CONF.integrations.push("Evergage");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Evergage CS Integration EndVerifying it works
You can check that the data is being sent for your campaign by using the Chrome extension, it should look like the below:
Creating a segment
You can find all of the test names that were sent to Contentsquare by creating a segment using dynamic variables and typing the prefix in the search box.
JW Player
Implementation
Add the code below to your tag manager.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
Add this code to a custom HTML tag in GTM or another TMS. Remove the script tags if required by your TMS.
<script type="text/javascript">
//remove script tag if needed
/*
*Name: JWPlayer CS Integration
*Version: 1.5
*/
(function () {
function init(context) {
var tvp = "VA_JWP_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
}
function startJWPIntegration() {
setTimeout(function () {
function getVID() {
return jwplayer().getPlaylistItem(0).mediaid
};
function dispatch(e) {
sendToCS(e, "Video ID : " + getVID());
};
var onPlay = false;
jwplayer().on("play", function () {
if (!onPlay) {
onPlay = true;
dispatch("Video started");
}
});
var onPlayAttemptFailed = false;
jwplayer().on("playAttemptFailed", function () {
if (!onPlayAttemptFailed) {
onPlayAttemptFailed = true;
dispatch("Video play attempt failed");
}
});
var onPause = false;
jwplayer().on("pause", function () {
if (!onPause) {
onPause = true;
dispatch("Video paused");
}
});
var onComplete = false;
jwplayer().on("complete", function () {
if (!onComplete) {
onComplete = true;
dispatch("Video completed");
}
});
var firstQtrComplete = false;
var secondQtrComplete = false;
var thirdQtrComplete = false;
var fourthQtrComplete = false;
jwplayer().on("time", function (e) {
var playbackPercent = (e.currentTime / e.duration) * 100;
var result = Math.floor(playbackPercent);
if (result > 25 && !firstQtrComplete) {
firstQtrComplete = true;
sendToCS("Video play view duration", "Video ID : " + getVID() + " : 25%");
}
if (result > 50 && !secondQtrComplete) {
secondQtrComplete = true;
sendToCS("Video play view duration", "Video ID : " + getVID() + " : 50%");
}
if (result > 75 && !thirdQtrComplete) {
thirdQtrComplete = true;
sendToCS("Video play view duration", "Video ID : " + getVID() + " : 75%");
}
if (result === 100 && !fourthQtrComplete) {
fourthQtrComplete = true;
sendToCS("Video play view duration", "Video ID : " + getVID() + " : 100%");
}
});
jwplayer().on("adImpression", function (e) {
sendToCS("Ad impression", "Ad ID : " + e.adId);
});
jwplayer().on("adPlay", function (e) {
sendToCS("Ad play", "Ad ID : " + e.adId);
});
jwplayer().on("adComplete", function (e) {
sendToCS("Ad complete", "Ad ID : " + e.adId);
});
jwplayer().on("adClick", function (e) {
sendToCS("Ad clicked", "Ad ID : " + e.adId);
});
jwplayer().on("adSkipped", function (e) {
sendToCS("Ad skipped", "Ad ID : " + e.adId);
});
jwplayer().on("error", function (e) {
sendToCS("Video error", "Video ID : " + getVID() + " : " + e.code);
});
}, 500);
}
var integrationJWPinitialised = false;
var integrationJWPstarted = false;
var jwplayer = window.jwplayer;
if (jwplayer) {
startJWPIntegration();
} else {
Object.defineProperty(window, "jwplayer", {
configurable: true,
get: function () {
return jwplayer;
},
set: function (n) {
jwplayer = n;
if (!integrationJWPinitialised) {
integrationJWPinitialised = true;
var jwplayerOn = jwplayer.on;
if (jwplayerOn) {
startJWPIntegration();
} else {
Object.defineProperty(jwplayer, "on", {
configurable: true,
get: function () {
return jwplayerOn;
},
set: function (n) {
jwplayerOn = n;
if (!integrationJWPstarted) {
integrationJWPstarted = true;
startJWPIntegration();
}
}
});
}
}
}
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init(context);
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("JW Player");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//JW Player CS Integration End
//remove script tag if needed
</script>Verifying it works
You can check that the data is being sent for your videos by using the Chrome extension, it should look like the below:
Once completed you will be able to see the results in Contentsquare like this:
Kaizen
Implementation
Add the follow code via your Tag Management System by using a custom tag container (remove the script tags if needed)
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Kaizen CS Integration
*Version: 1.6
*/
(function () {
function init() {
var tvp = "AB_KZ_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
}
function startKZIntegration() {
setTimeout(function () {
kzs("getVariation", function (data, state) {
if (state && state === "decided") {
if (data && data.experimentId && data.variationId && data.roundType) {
var campaignName = data.experimentId;
var variationName = data.variationId;
var roundType = data.roundType;
if (campaignName && variationName) {
sendToCS(campaignName, roundType + "_" + variationName);
}
}
}
});
}, 500);
}
var integrationStarted = false;
var kzs = window.kzs;
if (kzs) {
startKZIntegration();
} else {
Object.defineProperty(window, "kzs", {
configurable: true,
get: function () {
return kzs;
},
set: function (n) {
kzs = n;
if (!integrationStarted) {
integrationStarted = true;
startKZIntegration();
}
},
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Kaizen");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Kaizen CS Integration End
//remove script tag if needed
</script>Verifying it works
You can check that the data is being sent for your campaign by using the Chrome extension.
Launch Darkly
Implementation
Contact your LaunchDarkly technical contact and request that they enable the ldMeta object on your account.
Should there be any confusion on their behalf, contact the Integrations team at Contentsquare.
Add the follow code via your Tag Management System by using a custom tag container (remove the script tags if needed)
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: LaunchDarkly CS Integration
*Version: 1.1
*/
(function () {
function init() {
var tvp = "AB_LD_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
}
function startLDIntegration() {
setTimeout(function () {
for (var i = 0; i < ldMeta.length; i++) {
if (ldMeta[i].name && ldMeta[i].experience) {
sendToCS(ldMeta[i].name, ldMeta[i].experience);
}
}
}, 500);
}
var integrationStarted = false;
var ldMeta = window.ldMeta;
if (ldMeta) {
startLDIntegration();
} else {
Object.defineProperty(window, "ldMeta", {
configurable: true,
get: function () {
return ldMeta;
},
set: function (n) {
ldMeta = n;
if (!integrationStarted) {
integrationStarted = true;
startLDIntegration();
}
},
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("LaunchDarkly");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//LaunchDarkly CS Integration End
//remove script tag if needed
</script>Verifying it works
You can check that the data is being sent for your campaign by using the Chrome extension
LiveChat
Requirements
To make use of the replay feature you need to have 100% collection ratio, talk to your CSM about this.
Implementation
The following code should be deployed site wide via TMS.
The following code can be deployed after the Contentsquare tag.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: LiveChat CS Integration
*Version: 1.12
*/
(function () {
function init() {
var tvp = "CH_LC_";
var sendArtificialPageviews = true;
function sendToCS(csKey, csValue, csEventType, csPV) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
if (csEventType === "etr") {
_uxa.push(["trackEventTriggerRecording", csKey]);
} else if (csEventType === "reg") {
_uxa.push(["trackPageEvent", csKey + " | " + csValue]);
}
if (csPV && sendArtificialPageviews) {
_uxa.push(["trackPageview", window.location.pathname + "?" + csPV]);
}
}
function startLCIntegration() {
setTimeout(function () {
if (window.LC_API && LC_API.get_visitor_id && LC_API.get_chat_id && LC_API.set_custom_variables) {
LC_API.on_chat_started = function () {
var visitorID = LC_API.get_visitor_id();
var chatID = LC_API.get_chat_id();
sendToCS("Chat Started", "Chat ID : " + chatID, "etr", "cs_livechat=chat_started_" + chatID);
sendToCS("Chat Visitor ID", visitorID);
var isRecording = _uxa.push(["isRecording"]);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet && uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid) {
var custom_variables = [
{
name: "Contentsquare Replay",
value: "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=lc",
},
];
LC_API.set_custom_variables(custom_variables);
}
}
}
};
LC_API.on_chat_ended = function () {
sendToCS("Chat Ended (All Chats)", "true", 0, "cs_livechat=chat_ended");
};
LC_API.on_postchat_survey_submitted = function (e) {
var postData = e.form_data;
for (var i = 0; i < postData.length; i++) {
if (postData[i].label && postData[i].value) {
sendToCS(postData[i].label, postData[i].value);
}
}
};
LC_API.on_rating_submitted = function (data) {
var rating = data;
sendToCS("Chat Rating", rating);
};
}
}, 500);
}
var integrationStarted = false;
var LC_API = window.LC_API;
if (LC_API) {
startLCIntegration();
} else {
Object.defineProperty(window, "LC_API", {
configurable: true,
get: function () {
return LC_API;
},
set: function (n) {
LC_API = n;
if (!integrationStarted) {
integrationStarted = true;
startLCIntegration();
}
},
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("LiveChat");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//LiveChat CS Integration End
//remove script tag if needed
</script>If you want to disable the artificial pageviews that are sent then simply change sendArtificialPageviews to false in the code.
Verifying it works
You can check that the data is being sent for your surveys by using the Chrome extension, it should look like the below:
This shows that an artificial pageview was sent when the chat started and also a dynamic variable was sent. It includes a chat ID and visitor ID as well as any chat rating selected, if any.
This shows that an artificial pageview was sent when the chat ended and also a dynamic variable was sent. It also includes any post chat questions answered.
In Contentsquare you can find these variables by searching like this:
If you are using the replay feature then you should see this in your chat responses in your LiveChat account.
LivePerson
Requirements
To make use of the replay feature you need to have 100% collection ratio, talk to your CSM about this.
Implementation
In order to use this integration you need to select an Engagement Attribute in your LivePerson application so the code can send the Contentsquare replay link with the chat. By default, in the code below, we send it to the Customer Type attribute which is part of Visitor Info. If that is already being used then select another one which allows a string value to be sent to it and modify it in the code below.
To find what is being used or a new one open Data Sources and you will see Engagement Attributes.
Should you choose a different Engagement Attribute to the default one we are using (Customer Type) then you will need to modify the code below based on this documentation provided by LivePerson.
The section you will need to modify looks like this in the main integration code below: Make sure you keep recordingURL as the value of the attribute you select.
lpTag.sdes.push({
"type": "ctmrinfo",
"info": {
"ctype": recordingURL
}
});The following code should be deployed site wide via TMS.
The following code can be deployed after the Contentsquare tag.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: LivePerson CS Integration
*Version: 1.12
*/
(function () {
function init() {
var tvp = "CH_LP_";
var sendArtificialPageviews = true;
function sendToCS(csKey, csValue, csEventType, csPV) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
if (csEventType === "etr") {
_uxa.push(["trackEventTriggerRecording", csKey]);
} else if (csEventType === "reg") {
_uxa.push(["trackPageEvent", csKey + " | " + csValue]);
}
if (csPV && sendArtificialPageviews) {
_uxa.push(["trackPageview", window.location.pathname + "?" + csPV]);
}
}
var campaignDisplayed = false;
var chatStarted = false;
var chatEnded = false;
function liveEngageCallback(e) {
if (e && (e.state || e.state === 0) && e.engagementName) {
var state = e.state;
var engagementName = e.engagementName;
var skill = e.skill;
if (!skill) {
skill = "No skill";
}
if (state === 0 && !campaignDisplayed) {
campaignDisplayed = true;
sendToCS("Campaign Displayed", engagementName, 0, "cs_liveperson=campaign_displayed_" + engagementName);
}
if (state === "chatting" && !chatStarted) {
chatStarted = true;
sendToCS("Chat Started", engagementName, "etr", "cs_liveperson=chat_started_" + engagementName);
sendToCS("Skill", skill);
if (lpTag.sdes) {
var isRecording = _uxa.push(["isRecording"]);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet && uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid) {
var recordingURL = "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=lp";
lpTag.sdes = lpTag.sdes || [];
lpTag.sdes.push({
type: "ctmrinfo",
info: {
ctype: recordingURL,
},
});
}
}
}
}
}
if (state === "ended" && !chatEnded) {
chatEnded = true;
sendToCS("Chat Ended", engagementName, 0, "cs_liveperson=chat_ended_" + engagementName);
}
}
}
function startLPIntegration() {
setTimeout(function () {
if (lpTag.events && lpTag.events.bind) {
lpTag.events.bind({
appName: "*",
eventName: "*",
async: true,
triggerOnce: false,
func: liveEngageCallback,
});
}
}, 500);
}
var integrationStarted = false;
var lpTag = window.lpTag;
if (lpTag) {
startLPIntegration();
} else {
Object.defineProperty(window, "lpTag", {
configurable: true,
get: function () {
return lpTag;
},
set: function (n) {
lpTag = n;
if (!integrationStarted) {
integrationStarted = true;
startLPIntegration();
}
},
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Liveperson");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//LivePerson CS Integration End
//remove script tag if needed
</script>If you want to disable the artificial pageviews that are sent then simply change sendArtificialPageviews to false in the code.
Verifying it works
You can check that the data is being sent for your surveys by using the Chrome extension, it should look like the below:
This shows that an artificial pageview was sent when the chat started and also a dynamic variable was sent. It includes the fact that a chat started, the skill and the fact that a chat ended.
In Contentsquare you can find these variables by searching like this:
If you are using the replay feature then you should see a replay link in your chat responses in your LivePerson account under the attributes widget. You can also see it in the data export.
Maxymiser
The Contentsquare integration is natively built into Oracle Maxymiser’s campaign builder.
If you’re using the legacy platform, see the legacy deployment section.
Implementation
Follow the steps below.
Maxymiser’s Campaign Builder
Step 1
Inside of a campaign in campaign builder select “ADD AN INTEGRATION”
Step 2
Select Contentsquare, then check the Enable box and then click Save.
Step 3
You’ll now see Contentsquare listed as an integration for this campaign.
Verifying it works
Load the Maxymiser QA tool on the page where your test runs. It will show you the variants currently being displayed and you can use the Contentsquare Tracking Setup Assistant Chrome Extension to verify that Contentsquare is getting the data.
Legacy Platform
If you are not using Maxymiser’s Campaign Builder then the following guide will show you how to deploy the integration.
Step 1
From the main menu select Site Settings. Note – the site settings part only needs to be completed once.
Step 2
Check that you have the main integration module script. It will look like the below. If you don’t have this script contact Maxymiser support.
Step 3
If you have the main Integration Module script you can proceed with deployment. Add a new site script called CSIntegration using the code below.
The Code
(function() {
var CS = {
version: '3.0.1',
campaignRequired: true,
validate: function(integration) {
return true;
},
check: function(integration) {
return true;
},
timeout: 7000,
exec: function(integration) {
return helpers.send(integration);
}
};
var helpers = {
send: function(integration) {
var csPrefix = 'AB_MM_';
if (integration.isProduction === false) {
csPrefix = 'AB_MMQA_';
}
var csKey = csPrefix + integration.campaign.getName();
var csValue = integration.campaignExperience;
window._uxa = window._uxa || [];
window._uxa.push(["trackDynamicVariable", {key: decodeURI(csKey), value: decodeURI(csValue)} ]);
return true;
}
};
// Register and export
if (typeof modules === 'object' && typeof modules.define === 'function') {
modules.require('Integrations').register('Content Square', CS);
}
})();The CSIntegration script should be mapped site wide (under Site Script Mappings) to run after the main IntegrationModule script. In the example below, the IntegrationModule script will run first (because it has order -150) and the CSIntegration script will run second.
Your site settings are now complete and do not need to be modified again (note that they will need to be published).
Step 4
Inside of your campaign expand Additional Settings and then select Campaign Scripts
Step 5
Add the CSTrigger script below and save it.
Integrations.run('Content Square', {
campaign:campaign,
redirect:false
});
Step 6
Finally map the CS trigger script to the page or pages that the elements are mapped to:
Step 7
Your campaign setup should now look something like this and is ready for QA:
Medallia
Requirements
In order to use this integration you need to have a Medallia Digital account. To make use of the replay feature you need to have 100% collection ratio, talk to your CSM about this.
To proceed contact Medallia and request the following APIs to be enabled on your account.
MDIGITAL.CUSTOM_EVENTSMDigital_Feedback_Button_ClickedMDigital_Invite_DisplayedMDigital_Invite_AcceptedMDigital_Submit_FeedbackRatings APIContentsquare integration
Implementation
The following code should be deployed site wide via TMS.
The following code can be deployed after the Contentsquare tag.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Medallia CS Integration
*Version: 1.20
*/
(function () {
function init(context) {
var tvp = "FB_MD_";
var sendArtificialPageviews = true;
function sendToCS(csKey, csValue, csEventType, csPV) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
if (csEventType === "etr") {
_uxa.push(["trackEventTriggerRecording", csKey]);
} else if (csEventType === "reg") {
_uxa.push(["trackPageEvent", csKey + " | " + csValue]);
}
if (csPV && sendArtificialPageviews) {
_uxa.push(["trackPageview", window.location.pathname + "?" + csPV]);
}
}
function startMDIntegration() {
window.addEventListener("MDigital_Feedback_Button_Clicked", function (e) {
if (e && e.detail && e.detail.Form_ID) {
var surveyID = e.detail.Form_ID;
sendToCS("Feedback Button Clicked", "Survey ID : " + surveyID, 0, "cs_medallia=feedback_button_clicked_" + surveyID);
}
});
window.addEventListener("MDigital_Invite_Displayed", function (e) {
if (e && e.detail && e.detail.Form_ID) {
var surveyID = e.detail.Form_ID;
sendToCS("Feedback Invite Displayed", "Survey ID : " + surveyID, 0, "cs_medallia=feedback_invite_displayed_" + surveyID);
}
});
window.addEventListener("MDigital_Invite_Accepted", function (e) {
if (e && e.detail && e.detail.Form_ID) {
var surveyID = e.detail.Form_ID;
sendToCS("Feedback Invite Accepted", "Survey ID : " + surveyID, 0, "cs_medallia=feedback_invite_accepted_" + surveyID);
}
});
window.addEventListener("MDigital_Submit_Feedback", function (e) {
if (e && e.detail) {
var ed = e.detail;
if (ed.Feedback_UUID && ed.Form_ID && ed.Form_Type) {
var surveyID = ed.Form_ID;
var feedbackUUID = ed.Feedback_UUID;
var formType = ed.Form_Type;
sendToCS("Feedback Submitted", "Survey ID : " + surveyID, "etr", "cs_medallia=feedback_submitted_" + surveyID);
sendToCS("Feedback UUID", feedbackUUID);
sendToCS("Form Type", formType);
}
if (ed.Content) {
for (var i = 0; i < ed.Content.length; i++) {
if (ed.Content[i].type.toLowerCase().indexOf("grading") > -1 || ed.Content[i].type.toLowerCase().indexOf("nps") > -1) {
var value = ed.Content[i].value;
if (value) {
var rating = parseInt(value);
var ratingName = ed.Content[i].unique_name;
if (typeof rating === "number") {
if (ed.Content[i].type.toLowerCase().indexOf("nps") > -1) {
sendToCS("NPS Rating " + ratingName, rating);
} else {
sendToCS("Rating " + ratingName, rating);
}
}
}
}
}
}
}
});
var isRecording = _uxa.push(["isRecording"]);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet && uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid) {
var replayLink = "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=md";
if (window.CS_CONF) {
CS_CONF.replaylink = replayLink;
}
if (!window.ClickTale) {
window.ClickTale = {};
ClickTale.KampyleLink = replayLink;
}
}
}
}
}
var integrationStarted = false;
var MDIGITAL = window.MDIGITAL;
if (MDIGITAL) {
startMDIntegration();
} else {
Object.defineProperty(window, "MDIGITAL", {
configurable: true,
get: function () {
return MDIGITAL;
},
set: function (n) {
MDIGITAL = n;
if (!integrationStarted) {
integrationStarted = true;
startMDIntegration();
}
},
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init(context);
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Medallia");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Medallia CS Integration End
//remove script tag if needed
</script>If you want to disable the artificial pageviews that are sent then simply change sendArtificialPageviews to false in the code.
Verifying it works
You can check that the data is being sent for your surveys by using the Chrome extension, it should look like the below:
This shows that an artificial pageview was sent when the feedback invite was presented and also a dynamic variable was sent with the feedback details.
This shows that an artificial pageview was sent when the feedback invite was accepted and also a dynamic variable was sent with the feedback details.
This shows that an artificial pageview was sent when the feedback was submitted and also a dynamic variable was sent with the feedback details. It includes the ratings of all types.
In Contentsquare you can find these variables by searching like this:
If you are using the replay feature then you should see this in your survey responses in your Medallia account. Note that for now it will say ClickTale but this will be changed soon by Medallia to say Contentsquare, we apologize for the inconvenience.
Monetate
Implementation
The Monetate integration does not require any technical knowledge.
All the steps are detailed here (Contentsquare account required).
Mopinion
Implementation
The following code should be deployed site wide via TMS.
The following code can be deployed after the Contentsquare tag.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
Configure Mopinion Surveys
To make use of the replay feature you need to have 100% collection ratio, talk to your CSM about this.
If you do not have this type of replay then you can simply add the code to your site and will still be able to benefit from the dynamic variables generated.
Open Mopinion and configure each survey you want to track with a replay link. Add to each form an item of type Website Data
Insert the variable name like this: CS_CONF.replaylink
This should be the final result for replay link data collection
Next add the code to your TMS
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Mopinion CS Integration
*Version: 1.11
*/
(function () {
function init() {
var tvp = "FB_MO_";
var sendArtificialPageviews = true;
function sendToCS(csKey, csValue, csEventType, csPV) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
if (csEventType === "etr") {
_uxa.push(["trackEventTriggerRecording", csKey]);
} else if (csEventType === "reg") {
_uxa.push(["trackPageEvent", csKey + " | " + csValue]);
}
if (csPV && sendArtificialPageviews) {
_uxa.push(["trackPageview", window.location.pathname + "?" + csPV]);
}
}
document.addEventListener("mopinion_shown", function (e) {
if (e && e.detail && e.detail.formName && e.detail.triggerMethod) {
var ed = e.detail;
var formName = ed.formName;
var triggerMethod = ed.triggerMethod;
sendToCS("Feedback Displayed", formName, 0, "cs_mopinion=feedback_displayed_" + formName);
sendToCS("Feedback Trigger Method", triggerMethod);
}
});
var types = ["rating", "nps", "ces", "gcr", "select", "input", "textarea", "category", "thumbs", "radio", "checkbox", "likert", "matrix", "customer", "id"];
document.addEventListener("mopinion_feedback_sent", function (e) {
if (e && e.detail && e.detail.feedback) {
var ed = e.detail;
var formName = ed.formName;
sendToCS("Feedback Submitted", formName, "etr", "cs_mopinion=feedback_submitted_" + formName);
var feedBack = ed.feedback;
for (var i = 0; i < feedBack.length; i++) {
var type = feedBack[i].type;
var title = feedBack[i].title;
var value = feedBack[i].value.toString();
if (types.indexOf(type) > -1 && title && value) {
if (type.indexOf("rating") > -1 || type.indexOf("nps") > -1) {
if (type === "rating") {
type = "Regular";
} else if (type === "nps") {
type = "NPS";
}
title = type + " Rating";
value = parseInt(value);
} else {
var field = feedBack[i].field;
if (field) {
var fieldarray = field.split("_");
var number = fieldarray[2];
var extra = fieldarray[3];
}
if (type === "gcr") {
title = "Goal Completion Rate";
} else if (type === "ces") {
title = "Customer Effort Score";
value = parseInt(value);
} else if (type === "customer") {
title = "Customer ID";
} else if (type === "id") {
title = "Survey ID";
} else if (type === "likert") {
title = title + " (" + number + ")";
} else if (type === "checkbox") {
title = title + " (" + number + ")";
} else if (type === "matrix") {
title = title + " (" + number + "_" + extra + ")";
}
}
sendToCS(title, value);
}
}
}
});
var isRecording = _uxa.push(["isRecording"]);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid) {
var replayLink = "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=mo";
if (window.CS_CONF) {
CS_CONF.replaylink = replayLink;
}
}
}
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init(context);
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Mopinion");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Mopinion CS Integration End
//remove script tag if needed
</script>If you want to disable the artificial pageviews that are sent then simply change sendArtificialPageviews to false in the code.
Verifying it works
You should see dynamic variables like this when a feedback campaign is displayed
You should see dynamic variables like this when a feedback campaign is submitted
MyFeelBack
Implementation
Configure The MyFeelBack Survey
Go to the campaign you want to track with Contentsquare and access the Content section.
If you already have a Tracking code item in the question then simply edit it and skip adding a new one. If you don't yet have this item then select the very first question in the campaign then click Add new item.
Scroll down until you find Tracking code under Content and select it.
In the popup there is a textarea field which you need to insert the following code.
The Code - First Question
<script type="text/javascript">
/*
*Name: MyFeelBack CS Integration
*Version: 1.2
*/
(function() {
function init(context) {
var tvp = "FB_MFB_";
var campaignName = '[#campaign.name]';
function sendToCS(csKey, csValue, csPV) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
if (csPV) {
_uxa.push(["trackPageview", window.location.pathname + "?" + csPV]);
}
}
sendToCS("Feedback Displayed", campaignName, "cs_myfeelback=feedback_displayed_" + campaignName);
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init(context);
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("MyFeelBack");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
</script>You should then have this, press Validate after.
Next go to the very last question of the campaign, which is usually the Thank You page.
If you already have a Tracking code item in the question then simply edit it and skip adding a new one. If you don't yet have this item then select the very first question in the campaign then click Add new item.
Scroll down until you find Tracking code under Content and select it.
In the popup there is a textarea field which you need to insert the following code.
The Code - Last Page
<script type="text/javascript">
/*
*Name: MyFeelBack CS Integration
*Version: 1.2
*/
(function() {
window._uxa = window._uxa || [];
var tvp = "FB_MFB_";
var campaignName = "[#campaign.name]";
function sendToCS(csKey, csValue, csPV) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
if (csPV) {
_uxa.push(["trackPageview", window.location.pathname + "?" + csPV]);
}
}
sendToCS("Feedback Submitted", campaignName, "cs_myfeelback=feedback_submitted_" + campaignName);
/* If ratings are required then uncomment this code and set the specific answer ID in MyFeelBack using the # command and update the campaignRating value below
var campaignRating = #;
if (!isNaN(campaignRating)){
campaignRating = parseInt(campaignRating);
sendToCS("Feedback Rating " + campaignName, campaignRating);
}
*/
})();
</script>Note that if you have a ratings question defined, you can use the section in the code for campaign ratings. It is commented out and looks like this:
To make use of it remove all the comments tags at the top and bottom of the specific section.
Then where you see var campaignRating delete the # symbol and type the # symbol again in the same place.
Once you do that you will see the following:
Select Answers and then choose the answer on the right which contains the rating option. In this example above the "Are you satisfied?" is the one which is a rating.
You will then see the code change to something like this: Do not edit this part unless you know what you are doing.
Once completed press Save.
Verifying it works
You can check that the data is being sent for your campaign by using the Chrome extension, it should look like the below:
This shows that an artificial pageview was sent when the feedback was displayed and also a dynamic variable was sent with the campaign name.
Once the feedback has been submitted then you will see this:
This shows that an artificial pageview was sent when the feedback was submitted and also a dynamic variable was sent with the campaign name. If you had a rating option defined then you will also see the rating value being sent as a dynamic variable.
Namogoo
Implementation
Contact your Namogoo representative and ask them to have the Contentsquare integration enabled.
Verifying it works
Once completed you will be able to see the results in Contentsquare like this:
New Relic
Requirements
For this integration to work you will need to have the New Relic RUM (Real User Monitoring) tag on all the pages of your site.
Click here to access their RUM documentation.
Implementation
The following code needs to be added into your existing New Relic tag code.
make sure to place it at the bottom of the New Relic tag.
For example this is the top of your New Relic tag
You need to place it at the bottom like This
The Code - New Relic Tag
/*
Name: New Relic CS Integration
Version: 1.2
*/
if (sessionStorage.getItem("ContentsquareReplay") && sessionStorage.getItem("ContentsquareSID")) {
newrelic.setCustomAttribute("ContentsquareReplay", sessionStorage.getItem("ContentsquareReplay"));
newrelic.setCustomAttribute("ContentsquareSID", sessionStorage.getItem("ContentsquareSID"));
}The following code should be deployed site wide via TMS.
Set the trigger to be the window loaded event.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: New Relic CS Integration
*Version: 1.3
*/
(function () {
function init(context) {
var tvp = "APM_NR_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
}
var isRecording = _uxa.push(['isRecording']);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet && uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid) {
var intLink = "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=nr";
if (context && context.sessionKey) {
var sessionKey = context.sessionKey;
sessionStorage.setItem("ContentsquareReplay", intLink);
sessionStorage.setItem("ContentsquareSID", sessionKey);
sendToCS("SessionID", sessionKey);
}
}
}
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init(context);
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("New Relic");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//New Relic CS Integration End
//remove script tag if needed
</script>Verifying it works
You can use the chrome extension to check the session ID is sent to CS.
You can then also check that you find the Contentsquare replay link inside New Relic by checking the following places:
Note that you will only see a replay link for visitors who had Contentsquare Session Replay active.
The % depends on the ratio your account has, you can have that increased by talking to your CSM.
Go to Browser then choose the relevant application from the list
In there you can go to Filterable Geography and you should see the Contentsquare Replay link and the CS Session ID as custom attributes:
You can now find those replay link in your data that you query.
Olapic
Implementation
There are 2 parts to the code. The first part you need to contact your Olapic representative ask them to enable the Contentsquare integration on the widgets you want to track.
Then resume by adding the second part using the code below.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
Add this code to a custom HTML tag in GTM or another TMS. Remove the script tags if required by your TMS.
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Olapic CS Integration
*Version: 1.3
*/
(function () {
var tvp = "UGC_OL_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
}
var listener = function (e) {
if (e && e.detail && e.detail.mediaList && e.detail.options && e.detail.options.name && e.detail.options.id) {
if (e.detail.mediaList.length > 2) {
sendToCS("Widget displayed", e.detail.options.name + " (" + e.detail.options.id + ")");
} else {
sendToCS("Widget not displayed", e.detail.options.name + " (" + e.detail.options.id + ")");
}
window.removeEventListener("Contentsquare_OLP_Integration_Data", listener, true);
}
}
window.addEventListener("Contentsquare_OLP_Integration_Data", listener, true);
var evt = new Event("Contentsquare_OLP_Integration_Start");
window.dispatchEvent(evt);
function callback(context) {
if (!disableCallback) {
disableCallback = true;
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Olapic");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Olapic CS Integration End
//remove script tag if needed
</script>Verifying it works
You can check that the data is being sent for your campaign by using the Chrome extension, it should look like the below:
Once completed you will be able to see the results in Contentsquare like this:
Optimizely
Implementation
For Optimizely Full Stack use this documentation here.
For Optimizely Web (client side) resume below.
Add the following code to your TMS (Tag Management System) and inject it after Optimizely.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Optimizely CS Integration
*Version: 1.14
*/
(function () {
function init() {
var tvp = "AB_OP_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
}
function startOPIntegration() {
setTimeout(function () {
var state = optimizely.get && optimizely.get("state");
if (state) {
if (state && state.getCampaignStates && typeof state.getCampaignStates === "function" && typeof state.getCampaignStates() === "object") {
var getActiveCampaigns = state.getCampaignStates({
isActive: true,
});
var getTestKeys = Object.keys(getActiveCampaigns);
for (var i = 0; i < getTestKeys.length; i++) {
var prefix = getActiveCampaigns[getTestKeys[i]];
if (prefix.experiment) {
var campaignName = "";
var variationName = "";
if (prefix.experiment.name) {
campaignName = prefix.campaignName;
}
//Tests with no names
else {
campaignName = prefix.experiment.id;
}
//Personalization tests
if (prefix.experiment.campaignName && prefix.experiment.name) {
variationName = prefix.experiment.name + " - " + prefix.variation.name;
}
//AB tests
else if (prefix.variation.name) {
variationName = prefix.variation.name;
} else {
variationName = prefix.variation.id;
}
if (prefix.isInCampaignHoldback) {
variationName = variationName + " [Holdback]";
}
if (campaignName && variationName) {
sendToCS(campaignName, variationName);
}
}
}
}
}
var getCampaignDecidedTests = function (event) {
if (event && event.data && event.data.campaign && event.data.decision && event.data.campaign.experiments && event.data.campaign.experiments[0]) {
var decisionVariationID = event.data.decision.variationId;
var variations = event.data.campaign.experiments[0].variations;
if (decisionVariationID && variations && variations[0]) {
var variationName = "";
var campaignName = event.data.campaign.name;
for (var i = 0; i < variations.length; i++) {
if (variations[i].id == decisionVariationID) {
variationName = variations[i].name;
break;
}
}
if (!campaignName) {
campaignName = event.data.campaign.id;
variationName = decisionVariationID;
}
if (variationName && event.data.decision.isCampaignHoldback) {
variationName = variationName + " [Holdback]";
}
if (campaignName && variationName) {
sendToCS(campaignName, variationName);
}
}
}
};
optimizely.push({
type: "addListener",
filter: {
type: "lifecycle",
name: "campaignDecided",
},
handler: getCampaignDecidedTests,
});
}, 500);
}
var integrationStarted = false;
var optimizely = window.optimizely;
if (optimizely) {
startOPIntegration();
} else {
Object.defineProperty(window, "optimizely", {
configurable: true,
get: function () {
return optimizely;
},
set: function (n) {
optimizely = n;
if (!integrationStarted) {
integrationStarted = true;
startOPIntegration();
}
},
});
}
}
function callback() {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("Optimizely");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//Optimizely CS Integration End
//remove script tag if needed
</script>PowerReviews
Implementation
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
The Code
Add this code to a custom HTML tag in GTM or another TMS. Remove the script tags if required by your TMS.
<script type="text/javascript">
//remove script tag if needed
/*
*Name: PowerReviews CS Integration
*Version: 1.0
*/
(function () {
function init() {
var tvp = "UGC_PR_";
function sendToCS(csKey, csValue) {
csKey = tvp + csKey;
_uxa.push(["trackDynamicVariable", {
key: csKey,
value: csValue
}]);
};
function startIntegration() {
setTimeout(function () {
if (window.POWERREVIEWS && POWERREVIEWS.display && POWERREVIEWS.display.reviews && POWERREVIEWS.display.reviews.results && POWERREVIEWS.display.reviews.results[0] && POWERREVIEWS.display.reviews.results[0].rollup) {
var prefix = POWERREVIEWS.display.reviews.results[0].rollup;
if (typeof prefix.average_rating === "number" && typeof prefix.review_count === "number") {
var reviewCount = prefix.review_count;
var averageRating = prefix.average_rating;
sendToCS("Review Count", reviewCount);
sendToCS("Average Rating", Math.round(averageRating));
}
}
}, 500);
}
var integrationStarted = false;
var POWERREVIEWS = window.POWERREVIEWS;
if (POWERREVIEWS) {
startIntegration();
} else {
Object.defineProperty(window, "POWERREVIEWS", {
configurable: true,
get: function () {
return POWERREVIEWS;
},
set: function (n) {
POWERREVIEWS = n;
if (!integrationStarted) {
integrationStarted = true;
startIntegration();
}
}
});
}
}
function callback(context) {
if (!disableCallback) {
disableCallback = true;
init();
if (window.CS_CONF) {
CS_CONF.integrations = CS_CONF.integrations || [];
CS_CONF.integrations.push("PowerReviews");
}
}
}
var disableCallback = false;
window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);
})();
//PowerReviews CS Integration End
//remove script tag if needed
</script>Verifying it works
You can check that the data is being sent for your campaign by using the Chrome extension, it should look like the below:
Once completed you will be able to see the results in Contentsquare like this:
Qualaroo
Implementation
The following code should be deployed site wide via TMS.
The following code can be deployed after the Contentsquare tag.
If you use Google Tag Manager then make sure you set the Tag firing options to Once per page
To make use of the replay feature you need to have 100% collection ratio, talk to your CSM about this.
The Code
<script type="text/javascript">
//remove script tag if needed
/*
*Name: Qualaroo CS Integration
*Version: 1.12
*/
(function () {
function init() {
var tvp = "FB_QR_";
var sendArtificialPageviews = true;
function sendToCS(csKey, csValue, csEventType, csPV) {
csKey = tvp + csKey;
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
if (csEventType === "etr") {
_uxa.push(["trackEventTriggerRecording", csKey]);
} else if (csEventType === "reg") {
_uxa.push(["trackPageEvent", csKey + " | " + csValue]);
}
if (csPV && sendArtificialPageviews) {
_uxa.push(["trackPageview", window.location.pathname + "?" + csPV]);
}
}
function startQLIntegration() {
setTimeout(function () {
var isRecording = _uxa.push(["isRecording"]);
if (isRecording) {
var uxaGet = _uxa.push(["getSessionData"]);
if (uxaGet.projectId) {
var pid = uxaGet.projectId;
var uu = uxaGet.userId;
var sn = uxaGet.sessionNumber;
var pvid = uxaGet.pageNumber;
if (pid && uu && sn && pvid) {
var replayLink = "https://app.contentsquare.com/quick-playback/index.html?pid=" + pid + "&uu=" + uu + "&sn=" + sn + "&pvid=" + pvid + "&recordingType=cs&vd=qr";
_kiq.push([
"set",
{
"Contentsquare Replay": replayLink,
},
]);
}
}
}
var nudge_shown = false;
_kiq.push([
"eventHandler",
"nodeRendered",
function (nudge_id) {
if (!nudge_shown) {
nudge_shown = true;
sendToCS("Feedback Displayed", "Nudge ID : " + nudge_id, 0, "cs_qualaroo=feedback_displayed_" + nudge_id);
}
},
]);
var nudge_submitted = false;
_kiq.push([
"eventHandler",
"submit",
function (answers, nudge_id) {
if (!nudge_submitted) {
nudge_submitted = true;
sendToCS("Feedback Submitted", "Nudge ID : " + nudge_id, "etr", "cs_qualaroo=feedback_submitted_" + nudge_id);
}
if (answers[0] && answers[0].answer.length > 0 && answers[0].question.length > 0) {
var questionVar = answers[0].question;
var answerVar = answers[0].answer;
if (!isNaN(answerVar)) {
sendToCS("NPS Rating : NID : "