Oncklick code for a button

Retired Boards Appdev Store Design
,

Topic summary

Main issue: how to add onclick conversion tracking to “Buy now” and PayPal buttons in the Shopify Dawn theme.

Key context:

  • In Dawn, these dynamic checkout buttons are rendered in /snippets/buy-buttons.liquid. They use {{ form | payment_button }}, so you can’t directly add custom HTML attributes like onclick.
  • A screenshot (external link) contains the exact tracking code to be fired on click.

Proposed solution:

  • Add JavaScript in the main product section to attach an onclick handler at runtime.
  • Select the dynamic checkout button via its data-testid attribute (e.g., [data-testid=“Checkout-button”]).
  • Use setAttribute to inject the required onclick code (e.g., mgq.push([…]) instead of console.log).

Implementation details:

  • Place the script above the closing tag in the main product section (main-product.liquid).
  • Example approach was demonstrated via screencast; the provided mgq.push example is confirmed as correctly placed.

Status and next steps:

  • Resolution reached: use JS to add onclick to dynamic checkout buttons.
  • Recommendation: test on an unpublished theme and verify events in the analytics tool before publishing.
Summarized with AI on January 25. AI used: gpt-5.
1

Hi guys! Would you be so kind to help me with the next, please? Where can I find the button code to put there onclick code to count the conversions?

I plan to run an add and we need to put the html code to our buttons to be sure the system counts the conversions properly. Thank you!

2

Hi TaniaBondar,

Where to add conversion tracking code would typically depend on the theme you’re using. Which theme are you using and which button specifically do you want to add the conversion tracking to?

3

Hi Liam! Thank you for your attention! It is Dawn and I want to add the code to the

“buy now” and to Paypal button.

4

So for Dawn the code that renders the “buy now” and any dynamic checkout buttons is in the /snippets/buy-buttons.liquid file, eg: https://github.com/Shopify/dawn/blob/main/snippets/buy-buttons.liquid#L101

However the options for customizing dynamic checkout buttons is quite limited as the button is rendered via Liquid: {{ form | payment_button }} rather than as a regular HTML element - so you don’t have easy access from the code to add a custom class/ID, or in your case custom code that measures clicks/conversions.

What are the exact instructions for adding onclick code to count conversions?

5

Thanks, Liam!

The instructions were the next:

Add this piece of code to an HTML element on which you have to click for a conversion:

(the system doesn’t let me to insert the code exactly so I will add the screenshot)

https://monosnap.com/file/OyN8yJ61mNM0UJw8n0N0EClixQUcUE

6

I have tested out how to add an onclick Event Attribute to the dynamic checkout button, and it appears to be possible by adding Javascript to the main product section.

What you’d need to do is use a querySelector method to select the dynamic checkout button element using the data-testid attribute which is added to dynamic checkout buttons. The setAttribute method is then used to add the onclick event attribute to the button element.

In the example below I’m adding an onclick event attribute to the dynamic checkout element, so every time it’s clicked it will log a message to the console:

window.addEventListener('load', () => {
  const dynamicCheckoutButton = document.querySelector('[data-testid="Checkout-button"]');
  dynamicCheckoutButton.setAttribute('onclick', 'console.log("test")');
});

You can see this in action in this screencast. You can use the same approach but add in the function/ code you were provided in place of the console.log function in my example.

Hope this helps!

1 Like
7

Thank you for the idea. Let me specify just to be 100% sure. I have to add a modified function to main-product.liquid file, correct?
Where exactly do I need to add it to the code?
Please check the code below, is that what you meant by “add code to the function”?

window.addEventListener(‘load’, () => {
  const dynamicCheckoutButton = document.querySelector(‘[data-testid=“Checkout-button”]’);
  dynamicCheckoutButton.setAttribute(‘onclick’, ‘mgq.push([“MgSensorInvoke”, “purchase803749”])’);
});

Many thanks for considering my request.

8

Hi! That does look like correct placement of the function you were provided - this would be added to the main product section above the closing tag. It’s also advised to test this on an unpublished theme and ensure the expected events are being triggered on the web analysis tool before publishing the changes.

Hope this helps!