In the age of buyer self-education, prospects expect more control over how they evaluate software. According to Gartner’s research, Interactive Product demos are the most useful resource on the website for SaaS Buyers. Those demos give buyers access to a guided and narrated product tour even before they meet the sales team. The benefits for the buyers are obvious; however, their value can be significantly amplified for the vendors when paired with behavioural tracking and CRM enrichment.

This article covers how to embed self-qualification trackers into a HubSpot workflow using Google Tag Manager (GTM) and custom behavioural events. It also outlines the benefits, the necessary steps, and important considerations for tracking interactions inside iframes.

Why Self-Qualification Tracking Matters

Every click your prospect makes inside an interactive demo is an unfiltered signal of their true interests. With Demo Menus or “Choose Your Own Journey” controls, you promise viewers content that’s relevant to them, and the behaviors they reveal are objective, not filtered through a salesperson’s interpretation. Capturing this data is only step one; the real advantage comes from streaming it directly into your CRM. That integration paints a comprehensive, data-driven portrait of each opportunity. Once the data is there, you can use it to:

• Assign meaningful lead scores based on prospect behaviour
• Feed real-time intent data into HubSpot for segmentation and nurturing
• Equip sales with a better deal context‍
• Enhance reporting and attribution for demo engagement

For example, if a prospect selects:

1. Industry: Manufacturing
   
2. Persona: CRO
   
3. Pain Point: Shortening Sales Cycles
   
4. Shared Demo: Viewed

These interactions can be mapped as HubSpot custom events and used to influence workflows, scoring, and routing.

Technical Setup‍

Goal: Capture iframe demo interactions and send them into HubSpot.‍

1. PostMessage from inside the iframe

Since most demo tools (like Demoboost) are embedded in iframes, the first step is to expose interaction data to the parent page:

1. Open your demo’s first screen in the Editor
2. Select any element, open up the Edit menu and choose Edit HTML:

3. Paste in the following code at the end of the HTML content and click on Save:

<demoboost-script style="display:none;">

    const script = document.createElement('script');

    script.innerHTML = `document.addEventListener('click', () => {

  window.parent.postMessage({

    type: 'demoClick',

    name: 'Persona: CRO'

  }, '*');

});`

    parent.document.body.appendChild(script);

</demoboost-script>

This pattern mirrors HubSpot Meetings' own iframe implementation using postMessage. Reference.

2. GTM Listener in Parent Page

Use a Custom HTML Tag in the main website's GTM container to listen for these events:

<script>

window.addEventListener('message', event => {

  const d = event.data;

  if (d.type === 'demoClick') {

    window.dataLayer = window.dataLayer || [];

    window.dataLayer.push({

      event: 'demoClick',

      demoEvent: d.name

    });

  }

});

</script>

This technique is widely used in advanced analytics setups to bridge iframe tracking gaps. Source

3. Fire HubSpot Event Tag from GTM

Within GTM, create a trigger for demoClick and a tag that pushes data into HubSpot:

_hsq = window._hsq || [];

_hsq.push([

  "trackEvent",

  {

    id: "demoClick",

    value: "{{demoEvent}}"

  }

]);

Set this up as a Custom HTML Tag in GTM with a trigger for the demoClick event.

More from HubSpot’s developer documentation here.

HubSpot Event Setup

While HubSpot’s Event Visualizer is useful for tracking button clicks on standard pages, it does not support interaction tracking inside iframes—like embedded Demoboost demos.

Inside HubSpot:

• Go to Data Management > Custom Behavioral Events
  
• Create a new event manually (code or API-based, not visualizer)
  
• Name it according to the tracked intent (e.g., Demo: Persona CRO)
  
• Once triggered, these events will appear in the contact timeline
  

⚠️ Note: HubSpot’s Event Visualizer cannot track iframe interactions directly unless the iframe itself includes the HubSpot script. Reference

All custom events sent via GTM show up here. You can use them in Customer Journey Analytics, Lists, Workflows, and Lead Scoring rules.

‍Why Not Add HubSpot Directly Inside an iframe?

While you technically can add HubSpot via GTM inside the iframe, it often leads to:

• Duplicate sessions
  
• Conflicting cookies
  
• Disconnected CRM records

Using a single parent GTM container with postMessage tracking avoids this. More

Summary Workflow

Demo interactions like “Industry: Manufacturing” and “Persona: CRO” are tracked and stored in the contact activity timeline—fueling contextual sales outreach and automation.

Final Thoughts

If you're looking to capture deeper intent signals from demo engagement, this setup gives you everything you need:

• Clean tracking across iframe boundaries
  
• Direct event capture inside HubSpot
  
• Lead scoring and automation based on real-time interaction
  

Want help building out the GTM tags or HubSpot event schema? Reach out—we’re happy to share templates.

Sources & References

• Data Marketing School – HubSpot iframe Tracking
  
• MeasureSchool – Tracking iframe Interactions
  
• HubSpot Developer Docs – Custom Events
  
• HubSpot Knowledge Base – Event Tracking
  
• Napkyn – iframe + GTM Setup Guide
  
• HubSpot Community