1. Install the tracking script:

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.

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

Go to your Themes

2. On the Current theme, select the dotted menu and click "Edit code"

3. Open the layout/theme.liquid tab, add a call to our javascript tracking file right after the <body> tag and don't forget to save the changes:


    <script type="text/javascript" defer src="https://conversion.klarnaservices.com/kc.js"></script>
    <script defer>
      function ensureAPPRLTrackingExists(callback) {
        if (typeof APPRL !== 'undefined' && APPRL.Tracking) {
          callback();
        } else {
          setTimeout(() => ensureAPPRLTrackingExists(callback), 100);
        }
      }
      ensureAPPRLTrackingExists(() => {
        let klarnaDistalphalanx = document.cookie.split("; ").find((row) => row.startsWith("caprl-distalphalanx="))?.split("=")[1]?.split("|")[0];
        if (!klarnaDistalphalanx) {
          APPRL.Tracking.saveCrossbrowserDataOnCookie();
        }
      });
    </script>

Shall look like this:

2. Install the conversion script:

1. Go to the Settings tab in the main menu

2. Access Customer events and click Add custom pixel

3. Name pixel "Klarna Tracking", or any name you see fit, and Add pixel

4. In the Customer privacy section select Permission: Not required

5. Copy the following code:

var APPRL = APPRL || {};

APPRL.Tracking = APPRL.Tracking || {};
APPRL.Tracking.URL = APPRL.Tracking.URL || {};

APPRL.Tracking.URL.click_app_domain = 'https://c.klarna.com';
APPRL.Tracking.URL.getClickid = '/crossbrowser/get-clickid/';

APPRL.Tracking.sendOrder = function(klarnaClickId, checkout, is_crossbrowser) {
    const storeDomain = window?.location?.hostname?.replace('www.', '');
    const orderId = checkout.order?.id;
    const orderValue = checkout.subtotalPrice?.amount;
    const currency = checkout.subtotalPrice?.currencyCode;
    const currentDate = new Date();
    const cookieDateTime = currentDate.toISOString().slice(0, 19);
    const trackingUrl = `https://conversion-report.klarnaservices.com/sread.js/?store_domain=${storeDomain}&product_url=${storeDomain}/product/&order_id=${orderId}&caprl=${klarnaClickId}&cookie_datetime=${cookieDateTime}&order_value=${orderValue}&currency=${currency}&is_crossbrowser=${is_crossbrowser}`;

    console.log('KCP Tracking URL: ' + trackingUrl);

    try {
        fetch(trackingUrl, {
            method: 'GET',
            keepalive: true
        });
    } catch (error) {
        console.log('KCP: Error making tracking request:', error);
    }
}

APPRL.Tracking.getClickIdForDistalphalanx = function(distalphalanx, checkout) {
    var querystring = [];
    querystring.push('distalphalanx' + "=" + distalphalanx)
    querystring.push('store_domain' + "=" + encodeURIComponent(window.location.hostname))
    querystring.push('product_url' + "=" + encodeURIComponent(window.location.href))
    var getClickidUrl = APPRL.Tracking.URL.click_app_domain + APPRL.Tracking.URL.getClickid + '/?' + querystring.join("&");
    var timeout = 3000;

    console.log('KCP GetClickId URL: ' + getClickidUrl);

    fetch(getClickidUrl, {
            method: 'GET',
            keepalive: true
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.text();
        })
        .then(klarnaClickId => {
            APPRL.Tracking.sendOrder(klarnaClickId, checkout, 1);
        })
        .catch(error => {
            console.log('KCP: Error making getClickId request:', error);
        });
};


analytics.subscribe('checkout_completed', (event) => {
    const checkout = event.data.checkout;
    const klarnaClickId = document.cookie.split("; ").find((row) => row.startsWith("caprl="))?.split("=")[1]?.split("|")[0];
    console.log('KCP CID: ' + klarnaClickId);
    if (klarnaClickId) {
        APPRL.Tracking.sendOrder(klarnaClickId, checkout, 0);
    } else {
        const klarnaDistalphalanx = document.cookie.split("; ").find((row) => row.startsWith("caprl-distalphalanx="))?.split("=")[1].split("|")[0];
        console.log('KCP Distalphalanx: ' + klarnaDistalphalanx);
        if (klarnaDistalphalanx) {
            APPRL.Tracking.getClickIdForDistalphalanx(klarnaDistalphalanx, checkout);
        }
    }
});

5. Paste it into the Code section

6. Then click save in the top

7. From the dotted menu in Customer events, select Connect for the pixel you just created

Yay, you are done! Reach out to your contact to get a link and next steps to verify your installation via a test-purchase

Implement the Klarna Creator tracking in Shopify

1. Install the tracking script:

2. Install the conversion script: