I wish to trigger a Google Analytics Event when someone select "Add to Cart"

  • Posts: 190
  • Thank you received: 2
5 years 9 months ago #303193

-- url of the page with the problem -- : www.veggievore.com/dvd/why-we-do-what-we-do
-- HikaShop version -- : 4.0.1
-- Joomla version -- : 3.9.2
-- Error-message(debug-mod must be tuned on) -- : General question. No error.

I wish to trigger a Google Analytics Event when someone select "Add to Cart". Is this possible? If so, how?

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
5 years 9 months ago #303216

Hi,

It's possible yes.
You can use such javascript to plug yourself to the add to cart event and then trigger the GA event in your code.

window.Oby.registerAjax('cart.updated', function(params) {
 console.log(params);
 // your code to trigger the GA event
}

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

  • Posts: 190
  • Thank you received: 2
5 years 9 months ago #303261

Thank you very much Nicolas,

I am wondering if we should be pasting this code into the file product / add_to_cart_ajax.php file for my template?
Also wondering if it matters where we put this code in that file. We have two pieces of code to add:

// The code to record GA event (page view) for Hikashop pages with an add to cart button
ga(‘send’, ‘event’, ‘Landing Page’, Page View);
}


// The code to record an event for every Hikashop Add to Cart click
window.Oby.registerAjax('cart.updated', function(params) {
 console.log(“Add to Cart Event Occurred”);
 // your code to trigger the GA event
ga(‘send’, ‘event’, ‘Landing Page’, ‘Add to Cart’);
}

Last edit: 5 years 9 months ago by nicolas.

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
5 years 9 months ago #303275

Hi,

You need to add that javascript inside script tags either in the head or body of the pages where you have an add to cart button.
If you add it in add_to_cart_ajax, that will only do it for the products listings as that view file is not used on the product page.
You could add that code in your template. Or you could have a plugin to add that code to the header of the page. Or you could also add it in product/listing.php and product/show.php so that it is both on the listings and the product pages. All these are valid solutions. It depends what you prefer for the future maintainability of your code.

The following user(s) said Thank You: scarney

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

  • Posts: 190
  • Thank you received: 2
5 years 9 months ago #303497

Thank you. I added the following code using loadposition to load a custom module created with Sourcer from RegularLabs tags but the event did not get picked up although the code is displaying in the source of the page. Do you have any idea why? The page is located at

www.veggievore.com/dvd/why-we-do-what-we-do

The code I added is

<script>
// The code below will record a GA event for every Hikashop Product Page Page View 
console.log(“GA Page View”); 
ga(‘send’, ‘event’, ‘Landing Page’, ‘Page View’, window.location.pathname); 
}
// The code below will record an event for every Hikashop Add to Cart interaction
window.Oby.registerAjax('cart.updated', function(params) { 
 console.log(“Add to Cart Event Occurred”); 
 // your code to trigger the GA event 
ga(‘send’, ‘event’, ‘Landing Page’, ‘Add to Cart’, window.location.pathname); 
}
</script>

Last edit: 5 years 9 months ago by Jerome. Reason: [code] tag is really nice

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

  • Posts: 26158
  • Thank you received: 4028
  • MODERATOR
5 years 9 months ago #303504

Hello,

Please use the [ code ] tag to paste some code.
It looks like there are some missing content ; I place the tag without touching the content, but we can see that there missing lines since there are missing open brackets or missing closing parenthesis.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 190
  • Thank you received: 2
5 years 9 months ago #303829

Nicolas and Jerome,

I want to thank both of you for you help. We have been able to get working going being tracked and are grateful.

The GA code to record a GA Event when someone selects the Add to Cart button is working.

Can you please help us to know what is the code to record a GA Event when someone selects the Proceed to Checkout button?

You can see the working code, again, on this page:

www.veggievore.com/dvd/why-we-do-what-we-do

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
5 years 9 months ago #303835

Hi,

There is no event being fired by HikaShop in such case.
so you'll have to plug yourself to the onclick of the button with your own javascript.
For example:

var proceedButtons = document.getElementsByClassName("hikashop_cart_proceed_to_checkout");
var myFunction = function() {
    console.log('Proceed to checkout button clicked on');
    return true;
};
for (var i = 0; i < proceedButtons.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}
The same code can be used for any button on your website, provided that it has a specific class you can use to identify it.

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

Time to create page: 0.065 seconds
Powered by Kunena Forum