Google analytics, event settings on checkout

-- url of the page with the problem -- : www.abierto.uy
-- HikaShop version -- : 4.3.0
-- Joomla version -- : 3.9.18
-- PHP version -- : 7.3

Hello

We are starting to implement google analytics on the site, for which the marketing agency asks me to icluid certain JS codes on the buttons of the purchase process, the "next" button of the purchase process. With JavaScript, the click event of the link or button is captured, but in order to capture it, the event uses the css class or the element id. It happens that all the "next" buttons, from each step of the purchase process are the same, same css class and same item id.

My query is, do I have any way that each "next" button of the purchase process has at least one extra class of css different for each one, so that I can capture each click that the user gives and in this way Know how many begin the purchase process, how much they abandon the purchase process and how many finish it.

In addition, I would like to tell you to check the documentation about the google analytics plugin that includes hikashop, but it is not what you are needing at the moment.
www.hikashop.com/support/documentation/2...oogle-analytics.html

Thank you !

Hello, thanks for the answer

Great, but I ask you something else, just like I did in the other post, I had created a new function and called the onclic event for the "add to cart" button and that generated a conflict with the button's JS.
In this case, if I do that, it will also generate conflict, so should this code that you send me put it in the JS that already exists of the button? If so, will you tell me where I can find the corresponding file that I should edit?

And something important, when you update the components will these JS files get updated? so I keep it in mind so as not to lose the customizations.

Thank you !

Hello

Well I followed your directions but it gives me another error

Uncaught TypeError: Cannot read property 'addEventListener' of null
     at cid-2: 350

I really don't know what the mistake will be, I appreciate your help.

Thank you very much, greetings!

Hello, thanks for the answer

You are helping me a lot with this the issue of event tracking, the conflict that was generated with the checkout buttons has already been corrected, but I cannot get the tracking to work, I added a console.log() and an alert() to the JS code , to see if the function is executed, but the alert is not displayed and the message is not written in the console, it would seem that JS cannot find the link. I even tried the selectors like this, but it didn't work.

#hikashop_checkout [data-checkout-step = "1"] > a.hikabtn_checkout_next

If you have any more ideas that can help me, I will be very grateful

Many thanks, greetings!

Good Morning,

Well, check what you tell me, but it still doesn't seem to work, the console.log() and the alert() are not seen when pressing the button, should they be seen?

Greetings and thank you very much

Good Morning,

I thank you very much for your help, and I apologize, I have looked at it many times and did not see the obvious.

Although the analytics manager recently told me that he is not receiving tracking data from the buttons.

My question is, I added a console.log () statement and an alert () statement in the JS code of the click event and neither of the two messages are visible either on the console or on the screen, in your experience, should they see? I understand that the alert () should be seen, because the user must close the alert before continuing with the execution. Could you review it and give me your opinion please? www.abierto.uy

Greetings and thank you very much

Hello

I understand that you have not tried it, I know that you are doing everything possible to give me a solution.

Unfortunately, I added the parameter "true", but it remains the same, the alert I put in the code is not shown and the tracking is not received. I also tried with the parameter in false, but it did not work either.

Even add a click event only for the button and with a single alert,

if (document.querySelector ('button.hikabtn_checkout_next')) {
document.querySelector ('button.hikabtn_checkout_next'). addEventListener ('click', function () {
console.log ("botón solo");
alert ("botón solo");
}, true);
}
but clicking does not show the message.

Greetings and thank you very much

Hello

With this code, the alert is shown on the screen, but the process stops there, clicking the next button does not advance to the next step of the checkout, if I supplant the alert by the analytics tracking code, the checkout also stops

Greetings and thank you very much

I'm testing it on the test site
test-abierto.ofertaexportable.net/checkout

Good Morning

I changed return = true, to return = false, but the same happens, when clicking on the next button, it does not go to the next step, if I remove the alert, the next button does not work either, it only advances to the next step if I remove the sentence " return "
Anyway I don't see how I should do to identify the different steps of the process to track

Greetings thank you

good afternoon

I did the test to remove the "return" statement from the code you sent me and added the tracking codes with some "if" to identify the step.
In this way, fortunately, I am already tracking the "next" buttons of the entire checkout. Is removing the "return" statement a conflict for hgikashop?

The question that remains for me is, in the "start session" step of the checkout, if the user presses the next button, presses the "access" button of the checkout login form or presses the "register" button of the checkout registration form for hikashop is it the same? because if I click on the "access" button it does not track it, however the "next" button does.

Greetings thank you