Troubleshooting

Widget Interaction Tracking Not Working on Shopify

3 min read··By the TrackingCoder team
🔧

Common reasons widget-interaction tracking doesn’t fire

  1. GTM container not published - You imported the container but didn’t click Submit → Publish.
  2. GTM snippet not installed on your site - The GTM code needs to be in your site’s <head> and <body>.
  3. Widget renders in a cross-origin iframe - Calendly, Typeform, Tally, HubSpot Meetings, Cal.com, Mailchimp embeds, Klaviyo forms, and dozens of others use iframes hosted on the vendor’s domain. GTM on the parent page cannot see clicks inside. Most vendors expose a JS event API or postMessage hook for this exact reason.
  4. Widget uses postMessage to communicate - When the widget completes (e.g., a Calendly booking), the iframe posts a message to the parent: { event: 'calendly.event_scheduled', payload: {...} }. You need a window.addEventListener('message', ...) listener that filters by the message origin and event name.
  5. Lazy-loaded widget - Many widget embeds use data-widget-url + a deferred load on scroll-into-view to keep page-speed scores up. Listeners attached on DOM Ready miss the iframe entirely.
  6. Vendor changed their event names - Calendly v1 → v2 renamed events (e.g., event_scheduled stayed, but event_type_viewed became profile_page_viewed). If your tracking was set up before a vendor migration, it silently breaks on the upgrade.

Step-by-step debugging checklist

  1. Verify GTM is installed - Visit your site, right-click → View Page Source, search for “GTM-”. If you don’t see it, GTM isn’t installed.
  2. Check GTM Preview mode - In GTM, click Preview. Navigate your site and trigger the event. Look for your tag in the Tags Fired section.
  3. Check the trigger - If the tag shows as “Not Fired”, click on it to see which trigger conditions aren’t met.
  4. Identify the widget vendor - Inspect the iframe on the live page. The src tells you the vendor: calendly.com, tally.so, typeform.com, etc.
  5. Open the console and listen for postMessages - Run window.addEventListener('message', e => console.log(e.origin, e.data)). Interact with the widget. You should see messages from the vendor’s origin. The event name and payload tell you what to hook.
  6. Look up the vendor’s JS event docs - Search “[vendor name] javascript events” - almost every widget vendor publishes one. The docs list event names + the postMessage shape so you can match exactly.

How to verify it’s working

  1. Open GTM Preview/Debug mode
  2. Navigate to your site
  3. Trigger the event (interact with the widget (book a slot, complete a step, etc.))
  4. Check the GTM debug panel - your tag should appear under “Tags Fired”
  5. Check GA4 DebugView (GA4 → Admin → DebugView) to confirm the event arrived

Still didn’t work?

Our team can help. Describe what’s happening and we’ll get back to you within 24 hours.

Still didn't work? Report this issue

Fill in the details below and our team will review it within 3-5 business days. We aren't obliged to refund - but if we genuinely can't make it work, we may credit you back. Either way, your credits remain usable on a different event or site.

No need to type https:// - we'll add it for you.

Min 20 characters (0/20).

Context automatically included: widget interaction tracking on shopify

Skip the manual setup

TrackingCoder detects your CMS and plugins automatically, then generates ready-to-use tracking code. No more adapting generic tutorials - get code tailored to your exact setup in under 2 minutes.

Try TrackingCoder Free →

2 free credits on signup. No card required.