Google analytics, event settings on checkout

  • Posts: 93
  • Thank you received: 2
  • Hikamarket Multivendor Hikashop Business
2 weeks 13 hours ago #319211

-- 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 !

Please Log in or Create an account to join the conversation.

  • Posts: 69451
  • Thank you received: 10401
  • MODERATOR
1 week 5 days ago #319304

Hi,

There is not one different class in each step directly on the next button.
However, you can do it without that.
Instead using

$("a.hikabtn_checkout_next")
you can use:
$('#hikashop_checkout[data-checkout-step="1"] a.hikabtn_checkout_next')
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").

Please Log in or Create an account to join the conversation.

  • Posts: 93
  • Thank you received: 2
  • Hikamarket Multivendor Hikashop Business
1 week 5 days ago #319342

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 !

Please Log in or Create an account to join the conversation.

  • Posts: 69451
  • Thank you received: 10401
  • MODERATOR
1 week 4 days ago #319345

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:

document.querySelector('#hikashop_checkout[data-checkout-step="1"] a.hikabtn_checkout_next').addEventListener("click", function(){
 // your javascript code
});

Please Log in or Create an account to join the conversation.

  • Posts: 93
  • Thank you received: 2
  • Hikamarket Multivendor Hikashop Business
1 week 4 days ago #319374

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!

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 69451
  • Thank you received: 10401
  • MODERATOR
1 week 4 days ago #319376

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:

if(document.querySelector('#hikashop_checkout[data-checkout-step="1"] a.hikabtn_checkout_next')) {
document.querySelector('#hikashop_checkout[data-checkout-step="1"] a.hikabtn_checkout_next').addEventListener("click", function(){
 // your javascript code
});
}

Please Log in or Create an account to join the conversation.

  • Posts: 93
  • Thank you received: 2
  • Hikamarket Multivendor Hikashop Business
1 week 2 days ago #319493

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!

Please Log in or Create an account to join the conversation.

  • Posts: 69451
  • Thank you received: 10401
  • MODERATOR
1 week 2 days ago #319511

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

#hikashop_checkout[data-checkout-step="1"] a.hikabtn_checkout_next
that I gave in my previous message with no extra spaces or changes or it won't work.

Please Log in or Create an account to join the conversation.

  • Posts: 93
  • Thank you received: 2
  • Hikamarket Multivendor Hikashop Business
1 week 1 day ago #319563

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

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 69451
  • Thank you received: 10401
  • MODERATOR
1 week 1 day ago #319564

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.

Please Log in or Create an account to join the conversation.

  • Posts: 93
  • Thank you received: 2
  • Hikamarket Multivendor Hikashop Business
1 week 1 day ago #319597

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

Please Log in or Create an account to join the conversation.

  • Posts: 69451
  • Thank you received: 10401
  • MODERATOR
1 week 21 hours ago #319599

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.

Please Log in or Create an account to join the conversation.

  • Posts: 93
  • Thank you received: 2
  • Hikamarket Multivendor Hikashop Business
1 week 20 hours ago #319616

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

Please Log in or Create an account to join the conversation.

  • Posts: 69451
  • Thank you received: 10401
  • MODERATOR
1 week 1 hour ago #319636

Hi,

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

window.Oby.registerAjax('checkoutFormSubmit', function(params){
	var mainDiv = document.getElementById('hikashop_checkout');
	var step = mainDiv.getAttribute('data-checkout-step');
	alert('you are on step ' + step + ' and just clicked on the next button');
	return true;
});

Please Log in or Create an account to join the conversation.

  • Posts: 93
  • Thank you received: 2
  • Hikamarket Multivendor Hikashop Business
1 week 29 minutes ago #319638

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

Please Log in or Create an account to join the conversation.

  • Posts: 93
  • Thank you received: 2
  • Hikamarket Multivendor Hikashop Business
1 week 11 minutes ago #319639

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

Please Log in or Create an account to join the conversation.

  • Posts: 69451
  • Thank you received: 10401
  • MODERATOR
5 days 9 hours ago #319684

Hi,

Change the "return true;" to "return false;" and it won't stop the checkout.

Please Log in or Create an account to join the conversation.

  • Posts: 93
  • Thank you received: 2
  • Hikamarket Multivendor Hikashop Business
5 days 3 hours ago #319712

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

Please Log in or Create an account to join the conversation.

  • Posts: 93
  • Thank you received: 2
  • Hikamarket Multivendor Hikashop Business
4 days 21 hours ago #319753

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

Please Log in or Create an account to join the conversation.

  • Posts: 69451
  • Thank you received: 10401
  • MODERATOR
4 days 6 hours ago #319789

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:

window.Oby.registerAjax('checkoutFormSubmit', function(params){
to:
window.Oby.registerAjax(['checkoutFormSubmit','checkoutBlockSubmit'], function(params){

Please Log in or Create an account to join the conversation.

Time to create page: 0.094 seconds
Powered by Kunena Forum