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 10 replies - 16 through 25 (of 25 total)
  • 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 2 months, 2 weeks ago by Thomas Geiger.
    Plugin Contributor Krokedil

    (@krokedil)

    I’m saying that there is a problem when using the latest version of GTM4WP. This problem results in the customer not being redirected to the order received page correctly when purchase is finalized. Instead the checkout page is reloaded and the customer sees the Klarna Checkout “thank you for your order” message in the KCO iframe. At this stage the cart is not emptied and the tracking isn’t working correctly.

    The reason that this is happening is because of a change event that is triggered (in GTM4WP) when the WooCommerce checkout form is submitted, resulting in this ajax request not returning a success function. Since there is no success function returned, the customer is not redirected to the order received page.

    @sirrahikkala Are you saying that you have the same behavior in your store, without GTM4WP?

    Plugin Contributor Krokedil

    (@krokedil)

    We will get back to you in the support ticket we have.

    Since @andersbolander who started this thread is using GTM4WP and we know that this plugin together with KCO is generating a problem we will also try to solve that asap.

    Thanks for taking this problem seriously. I am following the thread and can appreciate the complexity. I really do hope that it will be solved soon.

    @duracelltomi Im not entirely sure what we can do. The confirmation page flow should be similar to a customer loading the checkout page with a standard checkout solution, and filling in the form and hitting submit without changing the payment method. We set the payment method in the sessions and it should because of that already be set on the page. And stopping the process, and showing the form on this page shows that the radio button is checked, and everything looks alright from what i can tell. If you have a way to solve this, i think that would be the best way to go forward.

    Edit: I believe i might have found something we can do. I will look into this tomorrow and test and get back to you then

    Plugin Contributor Krokedil

    (@krokedil)

    Hi all,

    We now have a solution for this issue. We have released a new version (v1.11.6) that should take care of the problem and make it possible to use the Klarna Checkout plugin together with GTM4WP again.

    Detailed information about the problem & the fix
    November 11, version 1.11 of Google Tag Manager for WordPress was released. In this version jQuery( 'input[name=payment_method]:checked' ).trigger( 'change' ); was added, and triggered when the WooCommerce checkout form was submitted – if no payment method previously was selected.

    For the KCO plugin this event was triggered when the confirmation page was rendered (the regular WooCommerce checkout page, but after the KCO purchase was finalized and the WooCommerce checkout form was submitted).

    In the KCO plugin we listen to this change event since it might be needed to switch checkout template file when switching to/from KCO payment method. However, this listener is not needed on the KCO confirmation page. We have removed this listener in version 1.11.6 of the KCO plugin and it should now be compatible with GTM4WP.

    Thanks @krokedil for your support and help to resolve this issue.
    I will also maintain my Klarna test site and when a new plugin version is released in the future, I will do my best to test it with GTM4WP as soon as possible.

    Thanks for your effort:-)

    I updated the Klarna plug in and all is fine. Transactions land in GA as they should.

    Hi!

    Looks like I still have this issue. I have reinstalled the GTM4WP but still no transactions showing and cart is not emptied.

    Could I please get some help here?

    Here is the site:

    https://banquet.se

    Plugin Contributor Krokedil

    (@krokedil)

    Hi @glawing

    Could you send us an e-mail to support@krokedil.se regarding your issue?

    Best Regards,
    Kristian Andersson

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