How to Track Clicks and Form Submissions with Meta Pixel on Shopify

Shopify's Facebook & Instagram app sends shop events to the Meta Pixel: page views, product views, add to cart and purchases. It does not send button clicks or form submissions. If you want Meta to see a contact form, a quote request or a click on a "Book a demo" button, you add that tracking yourself.

This guide shows how to track clicks and form submissions with Meta pixel on Shopify using a custom pixel in Customer events, how to name the events, and how to test them.

Key takeaways

• The Facebook & Instagram app tracks shop events, not clicks or form submissions.
• Add click and form tracking with a custom pixel in Settings > Customer events, not in theme.liquid.
• A custom pixel can subscribe to Shopify's form_submitted and clicked events, or to an event your theme publishes.
• Send form submissions as Meta's standard Lead event where it fits. Use trackCustom for anything else.
• Test with Meta's Test Events and Pixel Helper, with consent given.

Understanding Meta Pixel Event Tracking

The Meta pixel is JavaScript that sends events to Meta: actions people take on your store after seeing your ads on Facebook or Instagram. You see them in Meta Events Manager and use them in Ads Manager to measure and optimize campaigns.

Meta has standard events with fixed names, such as ViewContent, AddToCart, Purchase, Lead, Contact and CompleteRegistration. Ads can optimize for these directly. Anything else is a custom event, sent with trackCustom and a name you choose. To use a custom event in ads, you create a custom conversion from it in Events Manager.

For a contact or enquiry form, Lead or Contact usually fits. For a newsletter form, Lead or CompleteRegistration. Use custom events for clicks you want to count but not optimize for.

Setting Up Meta Pixel on Shopify (Quick Recap)

Connect the pixel through Shopify's Facebook & Instagram app before adding click and form tracking:

1. In your Shopify admin, go to Apps and sales channels and open the Facebook & Instagram app.
2. Open Settings, then Data sharing settings, and turn on customer data sharing.
3. Choose a data sharing level. Maximum also sends events through the Conversions API.
4. Select your Meta pixel from the list and confirm.

Then open your pixel in Meta Events Manager and check that page views and other shop events are arriving. The full walkthrough is in our guide to setting up the Facebook pixel on Shopify.

Tracking Clicks on Buttons and Links

Track button and link clicks with a custom pixel in Settings > Customer events. Older guides tell you to paste a document.querySelectorAll click listener into theme.liquid, but that code does not run on checkout, can break your theme, and is easy to duplicate.

A custom pixel runs in a sandbox, so it cannot read your store's page directly. Instead, it subscribes to events Shopify sends it. Shopify sends a clicked event for clicks on buttons and links, with details of the element clicked, such as its id and href.

1. Give the button or link a clear id in your theme, for example book-demo.
2. Go to Settings > Customer events, click Add custom pixel and name it, for example "Meta clicks and forms".
3. Paste Meta's base pixel code into the code box, without the <script> tags, then add the code below.
4. Save and click Connect.

// Meta's base pixel code goes here, without the <script> tags
fbq('init', 'YOUR_PIXEL_ID');

analytics.subscribe('clicked', (event) => {
  const element = event.data.element;
  if (element.id === 'book-demo') {
    fbq('trackCustom', 'BookDemoClick', { location: 'header' });
  }
});

Do not add fbq('track', 'PageView') here if the Facebook & Instagram app is installed. The app already sends page views, and a second one doubles them.

If a click is hard to pick out from the element alone, publish your own event from the theme instead. In the button's code, call:

Shopify.analytics.publish('book_demo_clicked', { location: 'header' });

Then subscribe to it in the custom pixel:

analytics.subscribe('book_demo_clicked', (event) => {
  fbq('trackCustom', 'BookDemoClick', event.customData);
});

Change the IDs and names to match your own buttons and events.

Tracking Form Submissions on Shopify

Track form submissions with the same custom pixel. Shopify sends a form_submitted event when a form on your storefront is submitted, including the form's action. Shopify's contact and newsletter forms post to /contact.

Add this to the same custom pixel:

analytics.subscribe('form_submitted', (event) => {
  const action = event.data.element.action || '';
  if (action.includes('/contact')) {
    fbq('track', 'Lead', { content_name: 'Contact form' });
  }
});

A few things to know:

• Forms from apps. Some form and popup apps do not trigger form_submitted. Check whether the app has its own Meta integration, or publish an event from its submit callback with Shopify.analytics.publish and subscribe to that.
• Klaviyo forms. Klaviyo's popup forms fire their own browser event on submit. Listen for it in your theme and publish a Shopify event the pixel can subscribe to.
• Server-side events. Browser events can be blocked. If leads matter a lot to you, consider sending them through the Conversions API as well, as covered in our server-side tracking guide.

Best Practices for Custom Event Naming & Management

Name and track events so they stay easy to read in Events Manager.

• List what you want to track first. For example: contact form, quote request, newsletter sign-up, "Book a demo" button.
• Use standard events where they fit. Lead for enquiries and quote requests, CompleteRegistration or Lead for sign-ups.
• Name custom events by action and place. BookDemoClick or FooterSignupClick says what happened and where.
• Add parameters instead of new names. Send the form or page as a parameter, such as content_name: 'Contact form', rather than a new event for each page.
• Keep it in one place. One custom pixel for your click and form events is easier to check than code spread through the theme.

Testing & Debugging Your Events

Test each event before relying on it.

1. In Meta Events Manager, open your pixel and click Test events.
2. Open your store in the same browser, accept cookies if you show a consent banner, and submit a form or click the button.
3. Watch the event arrive in Test Events with the right name and parameters.

You can also use the Meta Pixel Helper Chrome extension to see events as they fire.

If an event does not show:

• Check the pixel is connected. A custom pixel does nothing until you click Connect in Customer events.
• Check consent. Custom pixels that need marketing consent only run for visitors who accept it.
• Check the condition. Log event.data with console.log while testing, to see the id or action your code is matching.
• Turn off ad blockers in your test browser, or test in a private window.

Event counts in Meta will always differ from Shopify's numbers a little, because of blockers, consent and attribution.

Conclusion

To track clicks and form submissions with Meta pixel on Shopify, connect the pixel through the Facebook & Instagram app, then add a custom pixel in Customer events that subscribes to clicked, form_submitted or your own published events and calls fbq. Use standard events like Lead where they fit, name custom events clearly, and test with Test Events.

With these events in Meta, you can see which ads bring in enquiries and sign-ups as well as sales. For more on the pixel itself, see how to use Meta pixel.

Conversion pixel Shopify apps like MultiPixels install Meta, TikTok, Pinterest, Snapchat and GA4 pixels on a Shopify store without editing theme code. Install MultiPixels on your Shopify store to run several tracking pixels at once.