GA4 Tracking for HeavySet Tech Forms

Quick Setup Guide

Track your HeavySet Tech forms in Google Analytics 4 with this simple integration.

The Tracking Script

Copy this entire script and add it to your website (in the header, footer, or through Google Tag Manager):

<script>
// HeavySet Tech Forms GA4 Tracking Script
// Step 1: Replace the example tokens below with your actual form tokens
// Step 2: Add this script to your website

(function () {
  // Step 1: Replace these tokens with your actual form tokens and names
  var FORM_MAP = {
    'YOUR-TOKEN-HERE-1': 'contact-form',
    'YOUR-TOKEN-HERE-2': 'quote-form',
    'YOUR-TOKEN-HERE-3': 'appointment-form'
    // Add more forms as needed
  };

  // Whitelist: only accept messages from heavyset.tech (and subdomains)
  function isAllowedOrigin(origin) {
    if (!origin) return false;
    // Matches https://heavyset.tech or https://subdomain.heavyset.tech
    return (/^https:\/\/([a-z0-9-]+\.)*heavyset\.tech$/i).test(origin);
  }

  function getApiTokenId(messageData) {
    // Safely read messageData.data.apiTokenId without optional chaining
    if (!messageData || typeof messageData !== 'object') return null;
    if (!messageData.data || typeof messageData.data !== 'object') return null;
    if (!messageData.data.apiTokenId) return null;
    return String(messageData.data.apiTokenId);
  }

  function pushToDataLayer(eventName, params) {
    window.dataLayer = window.dataLayer || [];

    // GA4 via GTM commonly expects an "event" key
    var obj = { event: eventName };
    if (params && typeof params === 'object') {
      for (var k in params) {
        if (Object.prototype.hasOwnProperty.call(params, k)) {
          obj[k] = params[k];
        }
      }
    }
    window.dataLayer.push(obj);
  }

  window.addEventListener('message', function (e) {
    if (!e || !isAllowedOrigin(e.origin)) return;

    var msg = e.data;
    if (!msg || typeof msg !== 'object') return;

    var apiToken = getApiTokenId(msg);
    var formId = apiToken || 'unknown';
    var formName = (apiToken && FORM_MAP[apiToken]) ? FORM_MAP[apiToken] : 'heavyset-form';
    var msgType = msg.type;

    // Track form start on email submission
    if (msgType === 'emailSubmission') {
      pushToDataLayer('form_start', {
        form_name: formName,
        form_id: formId,
        page_location: String(window.location.href)
      });
      return;
    }

    // Track form submit on lead/appointment submission
    if (msgType === 'leadSubmission' || msgType === 'appointmentSubmission') {
      pushToDataLayer('form_submit', {
        form_name: formName,
        form_id: formId,
        page_location: String(window.location.href),
        submission_status: 'success',
        submission_type: msgType
      });
      return;
    }
  });
})();
</script>

Setup Instructions

1. Find Your Form Tokens

• Log into your HeavySet Tech dashboard
• Go to your form settings
• Find the API token/ID for each form

2. Edit the Script

• Replace YOUR-TOKEN-HERE-1, etc. with your actual form tokens
• Replace contact-form, quote-form, etc. with names that make sense for your forms

3. Add to Your Website

Choose one method:

• Option A: Add to your site's header or footer scripts
• Option B: Add through Google Tag Manager as Custom HTML
• Option C: Paste before the </body> tag on pages with forms

4. Verify It's Working

• Fill out a test form
• Check GA4 Real-time reports for form_start and form_submit events
• Events should appear within a few seconds

What Gets Tracked

• form_start - When someone enters their email
• form_submit - When someone completes the full form

View Your Data in GA4

Go to Reports → Engagement → Events in your GA4 property to see:

• How many people start vs. complete forms
• Which forms perform best
• Which pages generate the most submissions

Need Help?

• Form tokens: Contact HeavySet Tech support
• GA4 issues: Make sure GA4 is installed on your website first
• Not tracking: Check browser console for errors (F12 key)

That's it! Your forms are now tracked in GA4.

---

Learn More About HeavySet Tech

Want to see what HeavySet Tech can do for your business? Schedule a demo at https://heavyset.tech/contact to discover how our forms platform can help you book more appointments.