Support » Plugin: Klarna Checkout for WooCommerce » Enhanced Ecommerce dataLayer and event

  • Resolved andersbolander

    (@andersbolander)


    Hi,

    I am using Google Tag Manager for WordPress to create the dataLayer and event for GA Enhanced Ecommerce tracking.

    It was working fine until a little while back, Nov 11th, when the transaction part of the EE tracking broke. The “thankyou” page no longer has an EE dataLayer and there is no event. Apparently the GTM plugin no longer recognises the thankyou page, so maybe you can advise on possible causes and remedies.

    BR
    Anders:)

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 25 total)
  • Plugin Contributor Krokedil

    (@krokedil)

    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

    Plugin Contributor Krokedil

    (@krokedil)

    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

    Plugin Contributor Krokedil

    (@krokedil)

    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)

    Plugin Author klarna

    (@klarna)

    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.

    Plugin Contributor Krokedil

    (@krokedil)

    @duracelltomi Hi Thomas!

    We are debugging this right now to see what happens. Can you email us at support@krokedil.com so we get in contact? I can probably help you set up a sandbox too for the future.

    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.

    Plugin Contributor Krokedil

    (@krokedil)

    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.

    Plugin Contributor Krokedil

    (@krokedil)

    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?

Viewing 15 replies - 1 through 15 (of 25 total)
  • You must be logged in to reply to this topic.