Compatibility with Hyva Checkout

[anvanza]

Hyva Checkout is being used for a couple of stores now and expecting a lot more in the future.
Any plans to make the module compatible with this checkout?

[jissereitsma]

As of yet, I'm very busy myself, even though I would love to work on such a thing. I think somebody would first need to experiment with how to submit signals from the Magewire components in question towards the frontend (I believe this is already documented by Magewire itself) and then pick up on all of those events using custom JavaScript code. That dependency with the Hyva Checkout will be so large, that there must be a separate Yireo GoogleTagManager2ForHyvaCheckout module specifically for it.

[hans-vereyken-arvesta]

@anvanza Did you take any steps to make the module compatible with Hyva Checkout? We are looking at the same problem

[hans-vereyken]

@jissereitsma I quickly looked at 3 events we were missing (begin_checkout, add_shipping_info, add_payment_info), locally, this is working great. Can't make a PR just yet some more work needs to be done:

• testing it internally
• make the code compatible with PHP7.4
• don't expect the class "hidden" will be enough to hide an element (or just use window.eventListener)
• probably needs to be a separate module due to the \Magewirephp\Magewire\Component dependency

master...hans-vereyken:Yireo_GoogleTagManager2:master

[adam-0]

@hans-vereyken I'm testing your commit locally. It seems to work, I have all three events showing up in GA4
One correction, in view/frontend/layout/hyva_checkout_index_index.xml line 8
<block template="Yireo\GoogleTagManager2::hyva_checkout/data-layer.phtml"
should be
<block template="Yireo_GoogleTagManager2::hyva_checkout/data-layer.phtml"

[adam-0]

@hans-vereyken I found another issue at the checkout:
Livewire: Multiple root elements detected. This is not supported. See docs for more information https://laravel-livewire.com/docs/2.x/troubleshooting#root-element-issues

You can fix it by wrapping both elements in DIV in data-layer.phtml

<div>
    <script>
        function triggerEvent(event) {
            yireoGoogleTagManager2Pusher(event.detail);
        }

        function initGa() {
            "use strict";

            triggerEvent(new CustomEvent('ga:trigger-event', {detail:<?= json_encode($beginCheckoutEvent->get()) ?>}));

            return {
                triggerEvent
            }
        }
    </script>
    <div id="ga-trigger"
         x-data="initGa()"
         class="hidden"
         @ga:trigger-event.window="triggerEvent($event)"
    ></div>
</div>

[hans-vereyken]

@adam-0 Correct, but an even better solution is to ommit the DIV and just use window.eventListener instead.

[nahall]

I'm looking at doing the same (GA4 + Hyva Checkout). Has this patch continued to work well for you?

[hans-vereyken]

Yes, it's working for us. I should really make some time to create a PR and contribute (I need some time to investigate if the we really need to create a separate module for the Hyva checkout compatibility, is it possible in a nice way to not have a different module), but in webshop-land this is not the quietest period :-)

[jissereitsma]

As an update on all this, I've copied the code from @hans-vereyken into the extension code and will release this now under 3.7.0. If bugs come to rise, let's take it from there: 267eaf6

[jissereitsma]

Thanks @hans-vereyken for all the work!

[hans-vereyken]

Thanks Jisse, this is great!

[nahall]

I've been testing this with Hyva Checkout but am encountering the same console message "Livewire: Multiple root elements detected. This is not supported. See docs for more information https://laravel-livewire.com/docs/2.x/troubleshooting#root-element-issues"

[jissereitsma]

It's not supported, though it doesn't really do much harm because the second element is just a script. Still, the message is ugly. I've released 3.7.3 to wrap all in a div and fix this.

[jissereitsma]

I'm closing this issue because at least basic compatibility is there. If new issues arise, please post a new Issue here on GitHub.

[jissereitsma]

I am reopening this issue, due to a refactoring with CSP in mind. The current approach for the Hyva Checkout compatibility was to add a Block with a Magewire component, which then initializes an Alpine component, which triggers a GTM event as soon as the Alpine component is put together. This works but is quite complex.

The Magewire component is needed to trigger events based on what goes within the Hyva Checkout. However, Alpine is just overhead, IMHO. Listening to a global event instead (triggered by Magewire its dispatchBrowserEvent) would be cleaner, I think.

@hans-vereyken @adam-0 @hans-vereyken-arvesta @nahall Do you have any input on this?

Another minor thing is that the class Yireo\GoogleTagManager2\DataLayer\Event\BeginCheckout is inserted into the Magewire component, while it is actually not being used.

I've begun to refactor this anyway.

[jissereitsma]

This is currently the simplified version 77ace23 and it works ok.