Do you want to start using the attribution report in Klar? Great choice 🎉
To power our fully integrated attribution solution, you need to configure the Klar Pixel datasource in Klar and implement a tracking script on your site. This should only take a few minutes.
1. Adding the Klar Pixel Datasource
If you have multiple Shopify instances, with separate domains, connected to Klar, you should create a unique Pixel datasource for each of these stores.
Go to your Store Configurator page in Klar and click Connect Data Source
Select the Datasource Klar Pixel
Enter a name for the datasource - eg. Klar Tracking Script
Decide if you want to implement the tracking script via a domain-validated tracking script (first-party script) or basic tracking script (third-party script) and press configure.
We strongly recommend using a domain-validated tracking script. You have to setup a subdomain for your shop's domain with your DNS provider and we'll deliver the Klar Attribution JavaScript snippet via this subdomain. This will lead to more tracked conversions because some browsers are blocking third-party
JavaScripts by default.
If you selected basic tracking, you will now see the tracking script that you need to add to your site. For that, skip ahead to the next section.
If you selected Domain Validated Pixel please enter the domain name of the site on which you want to implement the pixel. Please exclude the https:// and www.
You will now see two boxes containing DNS records that you need to add to your DNS settings with your hosting provider.
Simply copy and paste the content of the fields by clicking on the copy icon next to it and adding them to the DNS settings.
If you are not familiar with how to do that, please reach out to the Klar support via the chat in the bottom right corner. We are happy to assist you.
2. Shopify/WebGo/All Inkl/Strato hosted domain
As written above Klar provides you with values, that you can copy & paste into your DNS settings.
The “name” field for the two entries usually looks something like this:
3450072213.deinshepherd.de
However, the domain validation process for Shopify only works if you are excluding your domain in the name field. So, make sure that you edit the name field the following way:
CNAME:
WRONG: 3450072213.deinshepherd.de
RIGHT: 3450072213
CNAME IPV4:
WRONG: 3450072213-4.deinshepherd.de
RIGHT: 3450072213-4
After the records have been added it can take anywhere from a few hours up to 2 days in extreme cases for the entries to be validated. You can click the Verify Integration button to do that. Once verified, a green check icon will appear next to the record.
Once all entries have been validated, a third box called Tracking Script will appear that contains your tracking script which you need to implement on your site.
3.Implementing the Klar script in your Shopify store
Now that you have your tracking script, it's time to implement it in your store.
What's the difference between the Customer Events and Legacy Klar Pixel?
Customer Events where introduced by Shopify to increase the security in your shops checkout, preventing the direct implementation of JavaScript that could potentially read and/or modify customer's information from the checkout. Now Shopify is providing a set of Customer Events that Klar can "subscribe" to in order to receive all relevant tracking information from your store.
The Legacy version of our script can be installed via your store's Liquid theme and the Checkout / Post Purchase survey section of your store's configuration. We also provide detailed instructions to install the Legacy script.
3.1 Normal Store
Press the Copy Script button next to your script to copy it
3.1 Normal Store
Press the Copy Script button next to your script to copy it
Implement the script in Shopify as described here:
3.2 Shopify Markets with multiple top level domains
If you're using Shopify Markets with multiple top level domains (TLDs) you have to adapt the script to reflect this.
First, create a separate domain-validated pixel for each TLD and insert the resulting generated Pixel URLs into the following script:
function getTLD() {
const hostname = window.location.hostname; // Get the hostname (e.g., www.example.com)
const parts = hostname.split('.'); // Split the hostname by periods
if (parts.length > 1) {
return parts.slice(-2).join('.'); // Return the domain and TLD (e.g., example.com)
} else {
return null; // No TLD found
}
}
function getPixelDomain() {
const domain = getTLD(); // Get the current domain and TLD
switch (domain) {
case "domain-a.de":
return "123456789.domain-a.de"; // Address for Domain #1
case "domain-b.de":
return "987654321.domain-b.de"; // Address for Domain #2
default:
return "987654321.domain-b.de"; // Default for fallback
}
}
const script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'https://' + getPixelDomain() + '/javascript/script.js';
document.getElementsByTagName('script')[0].parentNode.appendChild(script);
window._k_s_c_e = true;
window._k_s_c_e_i = init;
window._k_s_c_e_b = browser;
window._k_s_c_e_s = api.settings;
analytics.subscribe('all_events', (event) => {
window._k_s_q = window._k_s_q || [];
window._k_s_q.push(['Shopify:allEvents', event]);
});
You only have to modify this section:
function getPixelDomain() {
const domain = getTLD(); // Get the current domain and TLD
switch (domain) {
case "domain-a.de":
return "123456789.domain-a.de"; // Address for Domain #1
case "domain-b.de":
return "987654321.domain-b.de"; // Address for Domain #2
default:
return "987654321.domain-b.de"; // Default for fallback
}
}
For each TLD you would have to extend the switch statement and add a new case.
In case you need help with this. Please contact customer support, we're happy to help you with this!