Hotjar Funnel - Workaround for Checkout?

Highlighted
New Member
5 0 0

I know that Hotjar CANNOT track user activity on the checkout page.  That is well documented and understandable. But - I am trying something that I "think" should work to at least track users and let us know who proceeded to checkout (?)

I am using Hotjar learning great info about users actions (or lack there of) at our website.

I have it added to additional scripts so I can see customers who completed checkout and bought something - and then I added JS "tagging" code from Hotjar - hj('tagRecording', ['Added Product To Cart']); - to the "add to cart" function so I can identify those recordings where a customer actually put something into their cart.

To complete the funnel - I am trying to now tag those customers who go to checkout (by clicking on the "checkout" button) - even though I can't see what they do there - would like to have the recordings tagged so that I can see how often and by what route then got to checkout.

Our theme activates checkout with :

<input type="submit" class="action_button" id="checkout" name="checkout" value="CHECKOUT">

Is there a simple way to add an "onclick" to that input so that it would execute a JS function for : 

hj('tagRecording', ['Clicked Checkout']);

WITHOUT interfering with the execution and move to the Checkout page?

If I could make that work - I would have a pretty complete funnel of customer actions on our site.

Any help or advise would be appreciated.

0 Likes
New Member
5 0 0

I figured this out overnight - and for anyone who may see / read this is future - I just modified some JS code used for "Add an Agree to Terms & Conditons Checkbox" from here - https://help.shopify.com/en/themes/customization/cart/add-terms-and-conditions-checkbox - and now have all recordings for when a customer clicks on Checkout - being tagged by Hotjar.

This is what I added to my theme's JS file :

  $(document).ready(function() {
    $('body').on('click', '[name="checkout"]', function() {
        hj('tagRecording', ['Clicked Checkout']);
        $(this).submit();
    });
  });

 

On another (wierd) note - there really seems to be something wrong with Shopify / updating / caching / making changes to JS.liquid files today.  Had several occasions where changes were made & successfuylly saved to the app.js.liquid - but the changes are not reflected when you view the website. Have tested several browsers & deleted all cache & cookies numerous times. Finally got my changes made and accepted - but no idea at all why they were so difficult ??? 

0 Likes