Don't have one? Create one ↗
← All courses

Lesson 2 of 4

Typeform Submissions

① Connect your GTM container

Paste your container ID to load it into this page. It only ever runs here.

Advanced: use a specific environment

Typeform's embed talks to the page with postMessage, firing form-ready when it loads, form-screen-changed on each question, and form-submit on completion. None of it lands in your dataLayer until you listen for it.

You'll add a listener that translates Typeform's messages into named dataLayer events, then trigger on typeform_submitted, the completed response. The per-screen event lets you measure how far people get before abandoning a long form.

Goal

Push named dataLayer events from Typeform's messages and tag typeform_submitted.

Build it in GTM

  1. Add the listener as a Custom HTML tag

    Paste this into a Custom HTML tag firing on All Pages (or Initialization). It turns Typeform's signals into dataLayer events:

    <script>
    window.addEventListener('message', function (e) {
      if (!e.data || !e.data.type) return;
      window.dataLayer = window.dataLayer || [];
      if (e.data.type === 'form-submit') window.dataLayer.push({ event: 'typeform_submitted', form_id: e.data.formId });
      if (e.data.type === 'form-screen-changed') window.dataLayer.push({ event: 'typeform_step_change' });
    });
    </script>
  2. Create a Custom Event trigger on typeform_submitted

    Go to Triggers → New → Custom Event, set the event name to typeform_submitted, name it for the widget and Save.
  3. Fire a tag on it

    Add a GA4 Event tag (or the Custom HTML - Test stand-in) firing on that trigger, so the captured event reaches your analytics.
  4. Go deeper

    Want the full production script, a walkthrough video and a downloadable GTM recipe? DumbData: Typeform listener script, video + GTM recipe.

Debug in Tag Assistant

Copy this lesson's live URL and paste it into GTM Preview, that is the page Tag Assistant connects to. It has the clickable elements, so this page stays clean for reading.

  1. In your GTM, click Preview.
  2. Paste the live URL above and click Connect.
  3. Interact with the live page and watch your tag fire in Tag Assistant.

What you should expect to see

Submitting the simulated form pushes typeform_submitted, and your tag fires on it in Tag Assistant.

Verify your container

Built it? Export your container, Admin → Export Container, choose your workspace, then drop the JSON here to check it against this lesson.

Drop your container .json here

or browse · checked in your browser, nothing is uploaded

0 of 4 lessons complete