Fixing GTM Custom HTML JavaScript Errors

Custom HTML Tags and Their Risks

GTM Custom HTML tags execute arbitrary JavaScript on your website pages. Unlike the built-in tag templates (GA4 Event, Google Ads Conversion) which are sandboxed, Custom HTML runs with full browser JavaScript access. This makes them powerful but also risky — a JavaScript error in a Custom HTML tag can silently break the tag, cause other tags to fail, or produce browser console errors that affect Core Web Vitals.

Identifying Custom HTML Tag Errors

In GTM Preview Mode: tags that fired but had errors appear in red in the Tags Fired list. Click the red tag to see the JavaScript error message.

In Browser DevTools Console: JavaScript errors from GTM custom tags appear in the console. Look for errors mentioning "gtm.js" in the stack trace or errors immediately after a GTM-triggered script loads.

Common Custom HTML Tag Errors

1. ReferenceError: [variable] is not defined

The most common error. The tag references a variable (like an order total) that does not exist yet when the tag fires.

// BAD — 'orderTotal' may not exist yet
var total = orderTotal;

// GOOD — check before using
var total = (typeof orderTotal !== 'undefined') ? orderTotal : 0;

2. TypeError: Cannot read property of null

The tag tries to read from a DOM element that does not exist on the current page.

// BAD — will error if element doesn't exist
var email = document.getElementById('customer-email').value;

// GOOD — check element exists first
var emailEl = document.getElementById('customer-email');
var email = emailEl ? emailEl.value : '';

3. Missing <script> Tags

Custom HTML tags must wrap JavaScript in <script></script> tags. If you paste raw JavaScript without the script wrapper, GTM may not execute it or will produce errors.

4. Async/Timing Issues

Custom HTML tags fire synchronously. If the tag references a global object (like window.fbq or window.dataLayer) that has not loaded yet, the tag fails.

// BAD — fbq may not be available yet
fbq('track', 'ViewContent');

// GOOD — check fbq is available
if (typeof fbq === 'function') {
  fbq('track', 'ViewContent');
}

Testing Custom HTML Tags

1. In GTM Preview Mode, trigger the page where the tag fires
2. Check if the tag appears red in Tags Fired (error occurred)
3. Open browser DevTools Console simultaneously to see the full error message and stack trace
4. Fix in GTM → save → refresh preview (without publishing) to test again

Preventing Future Errors

• Add try/catch around Custom HTML tag code to prevent errors from breaking other tags
• Use null checks before accessing DOM elements or global objects
• Test Custom HTML tags in GTM Preview before publishing to live
• Document what each Custom HTML tag does — future editors should not need to reverse-engineer it

Summary

Custom HTML tag errors appear as red tags in GTM Preview and as console errors in browser DevTools. The most common errors are undefined variables, null DOM element access, missing script tags, and async timing issues. Fix by adding existence checks, wrapping in try/catch, and verifying object availability before use. Always test in Preview Mode before publishing custom HTML changes.

See our Conversion Tracking Fix service for GTM debugging support.

Need GTM custom HTML errors fixed? Contact Adslytics.