Klarna Checkout is a payment solution from Sweden, that is getting traction in more and more countries. If you aren’t familiar with this payment solution, take a look at the Klarna Checkout Demo Store.

In this blog post I demonstrate how you can measure Klarna Checkout as Google Analytics Enhanced Ecommerce Checkout using Google Tag Manager.

How to measure Klarna Checkout

Klarna Checkout is an iFrame, and the content in the iFrame is loaded from Klarna’s servers. This means that we can’t track anything inside the iFrame, but it doesn’t mean we can’t measure nothing.

We can measure if the user clicks inside the Klarna Checkout iFrame, or more correctly, if the iFrame is an active element – or in focus as I like to call it.

Klarna Checkout – are you focused?

If a user clicks inside the Klarna Checkout iFrame, the iFrame will be in focus. However, when the Klarna Checkout has loaded, it will often automagically set focus itself. As you can see from the image from the Klarna Checkout Demo Store, the Email address field is in focus. This focus was set by Klarna, and not because I clicked inside the Email address field.

This means that we will be measuring if the user clicked inside the iFrame, or if focus was set by Klarna itself. Make sure you understand how your Klarna Checkout iFrame behave.

But, we can also measure if Klarna Checkout loses its focus. This means that a user clicked outside the Klarna Checkout iFrame. And finally, we can measure if the user clicked the “Place Order” button inside the iFrame.

But, you just wrote that we can’t track anything inside the Klarna Checkout iFrame. Didn’t you?

I’m so glad you asked!

When a user clicks “Place Order”, a new iFrame loads in front of your checkout, and focus is shifted to that iFrame. We can measure that!

So now that I have lined up what we can measure and how, let’s get to work.

Google Tag Manager Setup

In the following setup, I assume that you already have implemented a Google Analytics Enhanced Checkout script for Google Tag Manager, that measures your “normal” checkout. I also assume that you track your transactions as Enhanced Ecommerce Purchase.

If you haven’t, and are not able to do that, you can just measure Klarna Checkout as a Virtual Page View. This is also demonstrated in my example. It will not give you the same insight, but it’s better than nothing.

Google Tag Manager Variables

You have to create/activate the following Variables in GTM.

Variable Name	Variable Type	Data Layer Variable Name	Comment
ecommerce	Data Layer	ecommerce	Choose Data Layer Version 1
checkout	Custom Javascript		Manipulates the Ecommerce Object
pageVirtual	Data Layer	pageVirtual	Virtual URL
checkoutOption	Data Layer	checkoutOption	Checkout Option for Klarna Checkout
Event	Custom Event		Activate Built-In Variable.

I only explain Variables ecommerce and checkout further.

Variable: ecommerce

This Variable returns the value of the ecommerce key in the data model. Choose Data Layer Version 1.

To learn more about this method, see the blog post Enhanced Ecommerce With A Custom JavaScript Variable from Simo Ahava.

• If you don’t have a Enhanced Ecommerce Checkout implementation, you don’t need this variable.

Variable: checkout

This is a Custom Javascript Variable, and what it does is simply to manipulate the Enhanced Ecommerce Object.

If a GTM Event with the value klarnaCheckout is Triggered, this script will change the Checkout Step number and the Checkout Option value.

• You may have to change the Checkout Step number depending on which step Klarna Checkout is in your funnel.
• If you don’t have a Enhanced Ecommerce Checkout implementation, you don’t need this variable.

Google Tag Manager Triggers

I always uses GTM Events as Triggers when I measure Google Analytics Enhanced Ecommerce (or I get GTM Events implemented so I can use them if I need them). This means that in an Enhanced Checkout implementation, I always have a GTM Event called “checkout“. But in additon to that, we need a separate trigger called klarnaCheckout.

Trigger: klarnaCheckout

The observant reader will already have seen this Trigger mentioned in my checkout variable.

Google Tag Manager Tags

We need to create 2 Tags in Google Tag Manager:

1. A Custom HTML Tag that will detect the Klarna Checkout iFrame.
   • This Tag is called Klarna Checkout Detection.
2. A Google Universal Analytics Tag that will track Klarna Checkout in Google Analytics.
   • This Tag is called GA – PageView – Checkout.

Tag: Klarna Checkout Detection

Create a Custom HTML Tag, and add this script. This script will detect Klarna Checkout iFrame “focus states“, and will then push the GTM Event called klarnaCheckout, in addition to the variables checkoutOption and pageVirtual.

The Klarna Checkout Detection Tag should only load on the checkout page where the Klarna Checkout is implemented.

This script comes originally from Stackoverflow. If you know a better method that works cross-browser, cross-device and cross-domain, please leave a comment.

If you wonder where I got the klarna-checkout-iframe value from in the script above, that is the Klarna Checkout iFrame ID. You will not find this ID by viewing the source code in the checkout, you have to use inspect element to find it.

To find the klarna-fullscreen-iframe you have to click “Place Order”, and then pause the “place order process”.

Tag: GA – Page View – Checkout

This is a simplified version of my Google Analytics Tag that tracks the checkout. I track all stages in this case as Virtual Page Views, in addition to Enhanced Ecommerce.

The GA – Page View – Checkout Tag has 2 Triggers.

• 1 Trigger for my “normal” Enhanced Ecommerce Checkout Tracking
• 1 Trigger for the Klarna Checkout Tracking

Enable Enhanced Ecommerce Features, and choose Read data from variable {{checkout}}.

Voila, your setup is finished!

Analysing your Klarna Checkout Data

To repeat, there are 3 different Checkout Options that will be reported. Remember, these options are measured on a session level, which means that only the last option in the user session for this step will be reported in the Checkout Behavior Analysis report:

1. klarna.focus.on – User clicked inside the Klarna Checkout iFrame, or Klarna did set focus on the iFrame itself.
   • This option reported equals a checkout drop-off. It can mean that the user clicked the browser back button, or closed the browser (tab).
2. klarna.focus.off – User clicked outside the Klarna Checkout iFrame.
   • This option reported equals a checkout drop-off. It could for example mean that the user clicked on a link that took him/her away from the checkout.
3. klarna.confirm – User clicked “Place Order” button.
   • The drop-off rate here should be very low. Make yourself familiar with the different payment methods in Klarna Checkout, to get a better understanding of how they can lead to drop-offs.

The better you measure other parts of your checkout, the more value you will get out of this tracking. For example, I found that most of the klarna.focus.on drop-offs in one checkout were caused by the value of the shopping basket. Those who didn’t get free shipping because the value of the shopping basket was to low, were mainly those who dropped off.

Klarna does also pass back technical error messages to the ecommerce store. Although I haven’t experienced that this happens often, it can be a good thing to measure those errors in Google Analytics as well.

Some final words

We are measuring Klarna Checkout by listening to Klarna Checkout iFrames. Although I haven’t noticed any problems with this method, if you do, please add a comment (BTW, these are the most common Klarna Checkout technical problems).

If you think the solution could be improved, or have done something different to measure Klarna Checkout, feel free to chime in.