Skip to main content
All CollectionsAccount & Datasource Set-UpAttribution
Setting up the Klar Pixel via Tag Management System
Setting up the Klar Pixel via Tag Management System

How to set up the Klar tracking pixel by validating your domain, implementing the tracking script, and adjusting UTM parameters.

Nico Stappen avatar
Written by Nico Stappen
Updated over a month ago

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.

If you want to implement the Klar Pixel via WooCommerce (not GTM), please consider this article

1. Adding the Klar Pixel Datasource

If you have multiple WooCommerce 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.

  • Make sure to select Other as Shop System.

We strongly recommend using our 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. GoDaddy/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:

123456789.your-shop.com

However, the domain validation process 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: 123456789.your-shop.com

RIGHT: 123456789

CNAME IPV4:

WRONG: 123456789-4.your-shop.com

RIGHT: 123456789-4

  • After the records have been added, please click the button "Verify Integration". In general it can take anywhere from a few hours up to 2 days in extreme cases for the entries to be validated. Once verified, a green check icon will appear next to the record.

  • Once all entries have been validated, a 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 Tag Management System

Add the script from the Klar Pixel to your Tag Management System as a Tag that fires on all pages.

In addition to adding the JavaScript snippet provided to you in the Klar app during data source creation, you also need to implement the following three custom events:

Events to implement

  • Klar:sendUpdateCartEvent

  • Klar:sendUpdateCheckoutEvent

  • Klar:sendOrderEvent

All these events are emitted by publishing a CustomEvent on the document. When the event has been successfully published a fetch event with the payload will be triggered.

1. Klar:sendUpdateCartEvent

Please trigger this event when the customer changes the content of the shopping basket, e.g. adds / removes products.

Required data:

  • cartId

Good to know: In case your shop system doesn't provide a cartId, you can also use the sessionId (context Id) for the payload of this event.

2. Klar:sendUpdateCheckoutEvent

Please trigger this event when the customer enters the checkout area of your shop.

Required data:

  • checkoutId

Optional data:

  • cartId

  • customerId

Good to know: In case your shop system doesn't provide a checkoutId and/or cartId you can also use the sessionId (context Id) for the payload of this event. For guests just leave the customerId empty.

3. Klar:sendOrderEvent

Please trigger this event on the "Checkout Finish" page, when the order has been placed by the customer.

Required data:

  • orderId

  • Optional data:

  • cartId

  • customerId

Good to know: In case your shop system doesn't provide a checkoutIdand/or cartId you can also use the sessionId (context Id) for the payload of this event. For guests just leave the customerId empty.

Examples

Klar:sendUpdateCartEvent

<script> (function() { window._k_q = window._k_q || []; window._k_q.push(["Klar:sendUpdateCartEvent", { cartId: 12345, }]); })(); </script>

Klar:sendUpdateCheckoutEvent

<script> (function() { window._k_q = window._k_q || []; window._k_q.push(["Klar:sendUpdateCheckoutEvent", { cartId: 12345, checkoutId: 12345, customerId: 34567 }]); })(); </script>

Klar:sendOrderEvent

<script> (function() { window._k_q = window._k_q || []; window._k_q.push(["Klar:sendOrderEvent", { orderId: 12345, cartId: 12345, customerId: 12345 }]); })(); </script>

Troubleshooting

When the events are emitted in case of an error there will a descriptive message shown in the console with the reason the call failed. In case you encounter any unknown errors or bugs, please contact our customer support.

4. Adding Data Privacy Snippets

Make sure to add our data privacy snippet in your privacy policy to inform your customers about the usage of Klar’s tracking pixel. You can find a German and English snippet in the Klar Pixel data source under the tracking script in a collapsed section called “Data Protection Snippet”.

5.Implementing Klar URL Parameters

To ensure that conversions and costs can be matched as accurately as possible, you need to implement the pre-defined Klar tracking codes in your ad accounts.

Here are guides on how to do that for each marketing channel:

What Happens Next?

Starting now, we will be able to track visitors on your site and their purchase activity to power our attribution reporting.

Starting tomorrow you will start seeing data in your reports but only from the point in time you added the script.

Did this answer your question?