Skip to main content

Implement the Klarna Creator tracking using Google Tag Manager (GTM)

Hanna Mattsson avatar
Written by Hanna Mattsson
Updated over 3 weeks ago

First go to the GTM page, create an account and install GTM on your website according to the instructions.


Install the script tag on all pages

Once installed go into the dashboard and click on Tags to create a new tag for us to load. We will create a tag which will load on every page on your website and put the Klarna Creator tracking script in that tag.
​


1. Click "New" to create a new tag.
​2. Name the new tag “Klarna Creator tracking script” or anything else that suits you.
​3. On Tag Configuration select Tag Type "Custom HTML"
​4. Add tracking script into the HTML:


The script to be added on all pages is:

<script type="text/javascript" defer="" src="https://conversion.klarnaservices.com/kc.js"></script>


5. Then click at Triggering below and select the All Pages option since we want this tag to trigger on every page. Click "save" when done.
​
When saved it shall look like this:
​

​

After this, the first stage is now in the books - the script will now be present on all pages on your site.

Additional notes:
​
1. In case you have cookie policy management tools installed on your website, ensure they are configured properly, as such tools may automatically delete cookies that are not included in their whitelist, potentially preventing our cookies from being saved.
​
2. For all websites it's important that the cookie follow along on any redirects made between different domains. Please see separate guide to ensure this is implemented correctly: COOKIE DECOR ON REDIRECTS

Add the Conversion tag

Next step will be to add another tag which will contain information about the sale. We only want that code to be present on the confirmation (or thank you) page so we will add another trigger to facilitate that.

  1. ADD TRIGGER

Click on Triggers and click New

Name the new trigger klarna-track for example and add a rule below which states that the trigger will be activated when the path or url contains a certain pattern. In our example it is confirmation.

So everytime you land on a page that has that string in its path the trigger will become active. Example of urls which will trigger this confirmation tag:

  1. https://www.somestore.com/purchase/confirmation

  2. https://www.somestore.com/confirmation/purchase

If you have another pattern on your site, just change the confirmation string to accommodate that. Click Save.
​

2. ADD VARIABLES
​

Now we will add the tag which populates the order detail variables, but first we'll register the variables. Click Variables in the side-menu.
​

There is a section called User-Defined Variables, click on New and select Data Layer Variable


Fill in the details like this, we start with naming the variable in the top left corner as transactionCurrency and then go to the Data Layer Variable Name and type apprlOrderCurrency. Click save.

All the variables (currency included) which must be added

  • Variable for transactionCurrency should have a Data Layer Variable Name which contains apprlOrderCurrency

  • Variable for transactionId should have a Data Layer Variable Name which contains apprlOrderId

  • Variable for transactionTotal should have a Data Layer Variable Name which contains apprlOrderTotal

Click save!

3. ADD TAG

Let's go back to Tags again to add a new tag which will trigger on the Confirmed rule we created earlier and use the variables we just introduced.
​

Click new and select Custom HTML and add the following, name it "Klarna Creator tracking purschase event" or other name of your choosing. Then we reference the variables we introduced earlier by adding the conversion script into the HTML.
Pst, mind the spelling!


​This is the script to be added into the HTML:

<script> 
  var APPRL = {}; 
  APPRL.Tracking = {}; 
  APPRL.Tracking.Sale = {}; 
  APPRL.Tracking.Sale.order_id = '{{transactionId}}'; 
  APPRL.Tracking.Sale.order_value = '{{transactionTotal}}'; 
  APPRL.Tracking.Sale.currency = '{{transactionCurrency}}'; 
</script> 
<script type="text/javascript" defer="" src="https://conversion.klarnaservices.com/kc.js"></script>


Now we have the tag which will feed the order details to our tracking script. It lacks a trigger though so we need to tell it to be included on the confirmation page. We earlier created a trigger for just that so below the box where we included the code above we have an option to add a trigger for this tag.
​

It should look like this when done:


Now this snippet will be triggered on all pages which has confirmation in the url path.
​

ADDITIONAL INFO:
​
Please note: Sometimes the order of the tags loaded from GTM is not correct. You can make sure this is made by adding this setting to the Conversion tag to make sure the allPages tag is fired directly after.

Now we have the GTM part sorted out. The variables we created will however not magically be populated so we need to pass those variables to the GTM Data Layer. We only want this on our "Confirmation"-page so we will add this snippet in our html like this.

The page the tag will be triggered on is the Confirmation page. The datalayer variables that the apprlConversion tag that we created will be using. Important that it is included before the Google Tag Manager tag inside the <head> of the page.
​

That should be all that is needed. Do not forget you need to populate the dataLayer variables through the server backend. Here is what is looks like in our example, using python and django templating.

Depending on which platform is used this can be done in numerous ways. The numbers and data included here is just for the sake of the example.

Did this answer your question?