Enhanced Ecommerce dataLayer and event

Hi,

What version of the Klarna Checkout plugin are you using? Did you make any changes to your website on the 11th of november?

Best Regards,
Kristian Andersson

Hej,

It is v1.11.5

There was work on a cookie in that timeframe, but the developer says it should not have any effect on the checkout process.

Clearly something is happening that has stopped the GTM plugin from recognising the Ecom-transaction.

BR
Anders

Hi,

Can you try rolling back one version of the Klarna Checkout plugin and see if the same issue still presists?

Best Regards,
Kristian Andersson

Sorry for the confusion in threads. I posted on the GTM4WP as well.
This is for Krokedil:

Dear Kristian,

I does seem like there is a compatibility problem.

To roll back the Klarna solution does not seem entirely safe to me. Which one breaks the other? Maybe a direct contact between Klarna and GTM4WP would be helpful.

The versions involved are:
WordPress 5.3
Klarna Checkout v1.11.5 20K+ installations
GTM4WP v1.11.2 300K + installations
Woo v3.8

General update was run Nov.19. No previous record.

BR
Anders

Hi,

I will take this discussion further with our developers and will get back to you guys as soon as I have more information.

Best Regards,
Kristian Andersson

Hi Everyone,

I am the developer of GTM4WP.

I am happy to resolve this but to do so, I need to setup a test site with Klarna. Since my country (Hungary) is not available to open any Klarna account, I would be happy if someone could help me to have any sanboxed Klarna access (pls do not share your existing credentials, I need my own account so setup continuous testing with further versions)

hi @duracelltomi – Thanks for the support! Klarna playground/test credentials can generated from: https://developers.klarna.com/documentation/testing-environment/
You can set your Woo test store base address to a supported Klarna country (e.g. Germany) & corresponding currency (e.g. EUR) for testing with those Klarna playground API credentials.

Hi,

Thanks for your positive reply.

I am attending a conference today with limited PC access but I will do my best to contact you as soon as possible.

Hi,

We are in contact with @duracelltomi and right now it seems to only be an issue when using the enhanced e-commerce tracking. We are working on a solution but don’t have anything yet.

Now the Klarna iframe does not load at all. Is there anything that needs to be done in the admin?

Logged out of admin and in again-solved. Sorry for the trivial stuff.

• This reply was modified 5 years ago by andersbolander.
• This reply was modified 5 years ago by andersbolander.
• This reply was modified 5 years ago by andersbolander.

Hi!

We are still debugging this issue together with the GTM plugin developer but still no solution.

We keep you posted.

@krokedil already dig deep into this issue and pointed some code in WooCommerce core that could be related to this issue if GTM4WP is enabled.

The “interesting” part is that this code refers to a WooCommerce hook that GTM4WP is not using ??

Now I have setup a test store at klarna.gtm4wp.com using this:
– PHP 7.3
– WordPress 5.3
– WooCommerce 3.8.1
– Klarna Checkout 1.11.5

What I can see is that after I placed a test payment, the “order received” page is shown on this page: https://klarna.gtm4wp.com/checkout

And GTM4WP recognizes this page as the normal checkout page and not the thank you page after payment.

To check this on other sites, you need to place a test purchase and open the browser console to check the content of the global dataLayer JavaScript variable. This will include multiple items, the 0 indexed item should include an ecommerce key which should hold a “purchase” subkey normally but I see a “checkout” subkey on the order received page as well.

{
	ecommerce: {
		currencyCode: "EUR",
		checkout: {
			actionField: {
				step: 1
			},
			products: [
				{
					id: 36,
					name: "Polo",
					sku: 36,
					category: "Tshirts",
					price: 20,
					stocklevel: null,
					quantity: 1
				}
			]
		}
	}
}

I wonder if Klarna is hooking into the woocommerce_is_order_received_page WooCommerce filter to make sure the custom order received page is correctly identified towards other plugins?
https://github.com/woocommerce/woocommerce/blob/737f6af5e8af27ae768d087e84c0303d8059281a/includes/wc-conditional-functions.php#L221

I am not using a custom order received page either ??

But at least I can now see the issue:
– when GTM4WP is enabled, the order received page is not shown, instead the user is left on /checkout
– when GTM4WP is disabled, the order received page is shown correctly with a redirection the the proper order-received page

So what I can see is that something breaks this redirection. Am I right?

I tracked down this to the following lines:
https://github.com/duracelltomi/gtm4wp/blob/master/js/gtm4wp-woocommerce-enhanced.js#L562

As far as I can see the issue is the following:

– user enters billing and card data
– Klarna backfills order data to the standard WooCommerce form element in the main frame
– fires the submission of the checkout form to execute default order storage features
– GTM4WP has a JS code that is attached to this form submit event
– it triggers the “change” event for the payment method radio button
– this is done to make sure another attached event handler gets fired which tells GTM what payment method has been selected (even if there is only one since IF there are multiple payment methods, it can happen that the default selected payment method is accepted by the user while placing the order)
– but this also triggers some JS code at Klarna which reloads the checkout page instead of directing the user to the order received page

So if lines 562-565 is commented out in /js/gtm4wp-woocommerce-enhanced.js I see the normal behavior.

Could you test this hypothesis?

Ok, I will try to keep this short but I can not promise that ??

What kind of GTM/GA tracking is involved in this issue?

In Enhanced Ecommerce, while you are tracking the checkout page, you have two opportunities to track:
– how the user walks through the checkout steps
– what checkout options the user selects in certain steps (so shipping and payment method for example)

To deliver a solution, I need to consider 2 cases, question is whether both could be possible at any site
#1 WooCommerce webshop using Klarna only
#2 WooCommerce webshop using Klarna and other payment providers

I have seen both cases in the past years, so I need to prepare GTM4WP for both cases

What specific code is causing the issue?

WooCommerce’s ordinary checkout page includes a payment method selector which is hidden if only one payment method is available. As far as I can see this is still present in the code of my test page but it is hidden from the user.

Despite it is hidden, a programmer can attache event handlers to it.

GTM4WP has an event handler attached to this payment method selector to make sure that the selected payment method is communicated to GTM. However this event handler is not executed if
#1 there is only one payment method available
#2 there are multiple payment methods available but the user accepts the default selected method (so for example if there is the option to pay using wire transfer or using a credit card, and wire transfer is by default selected during page load and this is what the user wishes to use)

To make sure that the selected payment method gets reported to GTM, GTM4WP has an other event handler attached to the checkout form for the above cases where no user interaction is done involving the payment method selector elements.

gtm4wp_checkout_step_fired at line 475 is used to make sure that this reporing is only done once, either while the user selects the payment method or during form submit whichever comes first.

How is this breaking Klarna Checkout?

While Klarna is backfillilng order data into the WooCommerce checkout form AND starts the submit process, the event handler of GTM4WP sees that no user interaction happened for payment method selection therefore it programmatically forces the hidden payment method element to broadcast a change event in the browser. This will fire the other event handler in GTM4WP which works perfectly unless another code is attaching an event handler to the payment method element too.

This is what Klarna does and this results in the interruption of the checkout form submit and reloading the checkout page with the Klarna iframe (just like someone would have just selected Klarna instead of… I don’t know… wire transfer).

In the background however order is stored and processed and a very weird page is shown: the checkout page but with the order received message (at least on my test site)

How can then this be solved?

I can see two solutions:

1. I will update GTM4WP to do its job using some other method
2. Klarna needs to update some JS code to prevent their payment method change event handler from executing while the order form is already submitting

Obviously 1. seems to be the easiest and I am open to make those changes however this will not give a 100% solution since if any other script/plugin attaches an event handler to the payment method controls, it could still break Klarna. So this is why I think this should be handled within Klarna and not because I am trying to escape from this task ??

• This reply was modified 4 years, 12 months ago by Thomas Geiger.