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 !

Hi,

There is not one different class in each step directly on the next button.
However, you can do it without that.
Instead using you can use: and that way you'll be able to add your code specifically for the button on the first step (and so you repeat the code for each step changing the "1").

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 !

Hi,

If you change the code in the javascript file you will indeed loose the change when you update your HikaShop.
That's why I don't recommend that. Now if you really want to do it, you can do it in the submitStep function of the file media/com_hikashop/js/checkout.js

But I would rather recommend to attach dynamically your javascript to the button.
And yes, you'll get the error again if you try to use jquery and it creates a conflict.
But you don't need to use jquery here. You can use just pure javascript, and in that case it will work.
You can do it like this:

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!

Hi,

Well yes, you need to add a check as that button won't be on all the pages of your website.
So it should be like this:

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!

Hi,

This selector cannot work for two reasons:
- you have a space between #hikashop_checkout and [data-checkout-step = "1"]. This means that the browser will search for a tag with the attribute data-checkout-step and the value 1 inside another tag with the id hikashop_checkout. But if you look at the HTML of the checkout, you'll see that the tag with the attribute data-checkout-step is the one with the id hikashop_checkout. So with that space, it won't be able to find anything.
- you have a > between [data-checkout-step = "1"] and a.hikabtn_checkout_next. This means that the browser will search for a tag "a" with the class hikabtn_checkout_next as a direct child of the tag it found with the the attribute data-checkout-step and the value 1. But if you look at the HTML of the checkout, you'll see that the tag "a" with the class hikabtn_checkout_next (the next button) is not directly below the tag with the the attribute data-checkout-step and the value 1 but several levels below.
So really, you want to make sure you use the selector that I gave in my previous message with no extra spaces or changes or it won't work.

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

Hi,

I checked and the issue is that it should be button.hikabtn_checkout_next instead of a.hikabtn_checkout_next in that code.
Please change that and it should work. Sorry for the error.

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

Hi,

It's because of this:
stackoverflow.com/questions/29922682/onc...stener-in-javascript
You want to add a third argument true to the addEventListener call.
Please understand that I'm writing the code off the top of my end and didn't test it before providing it.

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

Hi,

Then let's try using HikaShop's system instead:

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

Hi,

Change the "return true;" to "return false;" and it won't stop the 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

Hi,

No you can remove it.

And yes, this doesn't track when the "register" button is pressed.
For that to happen, you can change the line: to: