This integration will be used if you have Stripe pricing tables in your flow.
Stripe pricing table can be identified in Developer tools by text “stripe-pricing-table”, this means you are using Stripe’s pricing table integration - https://docs.stripe.com/payments/checkout/pricing-table
Works for one or more pricing tables on a page.
Screenshot of Devtools below
Integration steps:
Install Trackdesk app
Our Stripe app is available here in the Stripe marketplace - https://marketplace.stripe.com/apps/trackdesk
Fill in all necessary information in the settings of the Stripe app and save changes.
Tenant ID - Your Tenant ID can be found at the bottom of the Settings page
Personal token - Personal tokens can be found at the bottom of the Settings page, or a new one can be created via the Personal tokens menu in the Setting
3. Add the click script.
Track clicks by including the following code on every page of your website where you want to track clicks, including all landing pages added to this offer. For best results, position the code as high as possible within the <head> tag of your HTML document.
<!-- Trackdesk tracker begin -->
<script async src="//cdn.trackdesk.com/tracking.js"></script> <script>
(function(t,d,k){(t[k]=t[k]||[]).push(d);t[d]=t[d]||t[k].f||function(){(t[d].q=t[d].q||[]).push(arguments)}})(window,"trackdesk","TrackdeskObject");
trackdesk('YOUR TENANT ID', 'click');
</script>
<!-- Trackdesk tracker end -->
Make sure to replace Your Tenant ID with your actual tenant ID.
The next step is integrating a help script that will establish connection for the Stripe app.
The help script needed will vary depending on if the pricing table is on the same page as landing page or not.
You will need to add the below snippet to all pages where pricing tables are located. Add the snippet ideally at the end of the <body> tag
Pricing table on different page than landing page
This script is pasted to the page where the Stripe pricing table/s are present in case that this page is different than the landing page.
<!-- Trackdesk set client_reference_id pricing table help fuction begin -->
<script>
(function () {
var cookie = document.cookie.match('(^|;)\\s*trakdesk_cid\\s*=\\s*([^;]+)');
if (Array.isArray(cookie)) {
try {
var trakdeskCid = JSON.parse(cookie.pop());
var cid = trakdeskCid['cid'];
document.querySelectorAll('stripe-pricing-table').forEach(function (e) {
e.setAttribute('client-reference-id', cid)
});
} catch (e) {
console.log(e);
}
}
})();
</script>
<!-- Trackdesk set client_reference_id pricing table help fuction end -->
Pricing table on same page as landing page
This script is pasted to the page where the Stripe pricing table/s are present in case that it is directly the landing page.
<!-- Trackdesk set client_reference_id pricing table help fuction, click script on the same page as help script begin -->
<script>
(function () {
var linksUpdated = false;
setInterval(function () {
var cookie = document.cookie.match('(^|;)\\s*trakdesk_cid\\s*=\\s*([^;]+)');
if (Array.isArray(cookie) && !linksUpdated) {
try {
var trakdeskCid = JSON.parse(cookie.pop());
var cid = trakdeskCid['cid'];
document.querySelectorAll('stripe-pricing-table').forEach(function (e) {
e.setAttribute('client-reference-id', cid)
});
} catch (e) {
console.log(e);
} finally {
linksUpdated = true;
}
}
}, 300)
})();
</script>
<!-- Trackdesk set client_reference_id pricing table help fuction, click script on the same page as help script end -->