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

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.

Click "New" to create a new tag. First we will create a tag which will load on every page on your website and put the Klarna Creator tracking script in that tag.

Name the new tag “allPages” for example. Like this:

Next click on the Tag Configuration edit symbol in the top right, select the "Custom HTML"

Add the Klarna Creator tracking script like this:

The script to be added on all pages is:

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

Then click at Triggering below and select the AllPages option since we want this tag to trigger on every page. Click "save" when done.

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.

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

After this, the first stage is now in the books - the script will now be present on all pages on your site if you have released the workbench correctly.

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.

Click on Triggers and click New

Name the new trigger Confirmation 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 tag:

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

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 and 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 apprlConversion. Then we reference the variables we introduced earlier. Mind the spelling!

<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. Now this snippet will be triggered on all pages which has confirmation in the url path.

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.