For stores using Shopify we have 2 different options for the tracking installation:

1. Downloading our app, which automatically installs the tracking (OBS, does not work if you have the new Checkout Extensibility)

2. Manual installation in the code

Find instructions of the 2 ways here below:

Install tracking downloading the APPRL app

Go to your apps in Shopify and find the APPRL app: https://apps.shopify.com/apprl.

Please note, you must download the app one time per domain if you operate on different urls such as .de, .com, .se etc.

When installation is done you will land on the login page of the platform. However we must first verify the installation before you receive any login details. So when installation is done, reach out to your contact-person and we will get back to you with next steps.

Install tracking script manually in code:

You can install the tracking script either with GTM or without it.
Just select the way you want to go and finish with the Adding the conversion tag section in Shopify at the bottom of the page.

It is important to remember that if you have installed the script manually, if you would later change the theme of your store - then you must ensure the tracking is manually moved over to the new theme code. Otherwise we risk loosing sales while tracking script is missing from the website.

After you have selected to go with or without GTM: 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

With Google Tag Manager

Here is how you install the code snippet for GTM in the theme.liquid file. Installing GTM in Shopify

This is what the last steps looks like when applying the GTM script inside the theme.liquid template. First step which are located inside the head tag.

And the second located in the beginning of the body section

Once that is done GTM is installed, halfway there! If you do not have Google Tag Manager installed you need to follow the steps below.

Without Google Tag manager

To add the conversion tag to Shopify we need to do a workaround since GTM does not work unless you are on the Shopify Plus plan

1 - On layout/theme.liquid, add a call to our javascript tracking file right after the <body> tag and save:

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

Adding the conversion tag manually in code:

a. Go to the settings

b. Access Customer events and add custom pixel

c. Name pixel "Klarna Tracking" or any name you see fit

d. Add the following code, save and connect.
PS: Make sure you replace storeDomain by your right store domain.

analytics.subscribe('checkout_completed', (event) => {
 const storeDomain = window?.location?.hostname?.replace('www.', '');

 const checkout = event.data.checkout;
 const klarnaClickId = document.cookie.split("; ").find((row) => row.startsWith("caprl="))?.split("=")[1]?.split("|")[0];

 console.log('Klarna CID: ' + klarnaClickId);

 if (! klarnaClickId) {
return;
 }

 const orderId = checkout.order?.id;
 const orderValue = checkout.totalPrice?.amount;
 const currency = checkout.currencyCode;
 const currentDate = new Date();
 const cookieDateTime = currentDate.toISOString().slice(0, 19);

 const trackingUrl = `https://conversion-report.klarnaservices.com/d9core/?store_domain=${storeDomain}&product_url=${storeDomain}/product/&order_id=${orderId}&caprl=${klarnaClickId}&cookie_datetime=${cookieDateTime}&order_value=${orderValue}&currency=${currency}`;
 
 fetch(trackingUrl, {
 method: 'GET',
 keepalive: true,
 });
});

Pst, In the above code snippet we have added a dynamic domain fetch, which will work both if you have one shared domain for all markets or if you have more domains under the same Shopify store. This can also be exchanged with one constant domain, see that code below for reference, if that would suit your store setup better:

const storeDomain = 'test.com';

Done!

Due to the wide variety of ways stores can configure their site via Shopify, there can be differences in what the code looks like and stores custom selected settings which require extra adjustments.

It is important to ensure the value and currency are sent correctly.

One common adjustment needed to be done for Shopify is to add rule for sending the amount without a thousand separator as our system can not read that value. It could look like this for the order_value parameter:

The order_value shall also be sent as float.

For additional support with adjustments to provide the right data, we refer you to your Shopify Support. Or more code configuration examples can be found here: https://shopify.dev/api/liquid/objects/order