Event Tracking

The SmartTouch script (smarttouch.js) tracks user engagement events and pushes them to:

• window.dataLayer as a GA4 Event (for Google Tag Manager / GA4)
• window.uetq (Microsoft/Bing UET tag), and
• an internal events array used for form-submission reporting.

Every tracked event carries a common set of properties:

Each element is only tracked once per page load (deduplicated via an internal flag on the element).

Automatic Tracking (no setup required)

These fire automatically without any attributes or code, based on link href:

To disable any of these, set the corresponding flag to false before the elements render:

window.smarttouch.trackCalls = false; // disable Click to Call
window.smarttouch.trackEmails = false; // disable Click to Email
window.smarttouch.trackMaps = false; // disable Driving Directions

1. Data Attribute Tracking (recommended)

The simplest way to track a custom engagement event is to add a data-sttrack attribute to any clickable element. No JavaScript is required, and it works on elements added to the page at any time (SmartTouch watches the DOM for new matches).

<button data-sttrack="Brochure Download">Download Brochure</button>

Clicking this button tracks an Engagement event named Brochure Download, using the element's text as the label.

Supported data attributes

Example with overrides

<a
	href="/floorplans/the-oakwood"
	data-sttrack="Floorplan View"
	data-stlabel="The Oakwood"
	data-stcommunity="Sunset Ridge"
	data-stfloorplan="The Oakwood">
	View Floorplan
</a>

data-sttrack events are dispatched directly to dataLayer/uetq and are not added to the internal events array (which only tracks calls, emails, directions, and form submissions).

2. JavaScript API Tracking

Use the window.smarttouch instance methods when you need tracking logic driven from code (e.g. inside a framework component, or when a data attribute isn't practical).

smarttouch.trackEvent(name, label, extraProps)

Tracks a generic Engagement event.

window.smarttouch.trackEvent('Brochure Download', 'Sunset Ridge Brochure', { stCommunity: 'Sunset Ridge' });

smarttouch.trackCall(el, label, extraProps) / smarttouch.trackEmail(el, label, extraProps) / smarttouch.trackMap(el, label, extraProps)

Manually track a call, email, or maps link click (useful if automatic tracking was disabled, or the link is generated dynamically). el must be the anchor element; label and extraProps are optional overrides.

document.querySelector('#custom-call-link').addEventListener('click', (e) => {
	window.smarttouch.trackCall(e.currentTarget);
});

smarttouch.trackForm(label, extraProps)

Manually track a Form Submission event (SmartTouch forms do this automatically).

window.smarttouch.trackForm('Contact Us', { stCommunity: 'Sunset Ridge' });

smarttouch.track(category, action, label, el)

Generic dispatcher mirroring legacy Google Analytics category/action/label events. Routes to the correct method above based on category/action:

window.smarttouch.track('Engagement', 'Brochure Download', 'Sunset Ridge Brochure');
window.smarttouch.track('Contact', 'Click to Call', 'Sales Line', linkElement);

smarttouch.trackClick(selector, name, label, extraProps)

Registers a persistent click listener for any current or future element matching selector. Fires trackEvent(name, label, extraProps) whenever a matching element is clicked.

window.smarttouch.trackClick('.hero .cta-button', 'Hero CTA Click', 'View Homes');

smarttouch.onClick(selector, callback)

Registers a click callback for elements matching selector. callback(el) receives the clicked element; call any tracking method yourself inside it.

window.smarttouch.onClick('.gallery-thumb', (el) => {
	window.smarttouch.trackEvent('Gallery Image View', el.dataset.imageTitle);
});

smarttouch.onLoad(selector, callback)

Fires callback(el) once, as soon as an element matching selector appears in the DOM (does not require a click).

window.smarttouch.onLoad('.virtual-tour-embed', (el) => {
	window.smarttouch.trackEvent('Virtual Tour Viewed', el.dataset.community);
});

smarttouch.trackAdvanced(selector, target, callback)

For a container matching selector, listens for clicks on any descendant matching target. callback(container) must return an array of arguments to pass to trackEvent(...), or a falsy value to skip tracking. Works on elements added to the page at any time.

window.smarttouch.trackAdvanced('.community-card', 'a.details-link', (card) => {
	return ['Community Details Click', card.dataset.communityName];
});

smarttouch.trackEventAdvanced(base, target, callback)

Same behavior as trackAdvanced, but binds immediately to elements present at call time (does not watch for elements added later). Use this only when the elements already exist on the page when it's called.

Global Helper Functions

Convenience wrappers around the API above, exposed on window for use in inline onclick handlers or non-module scripts:

<a
	href="tel:+18005551234"
	onclick="stTrackCall(this, 'Sales Hotline')"
	>Call Us</a
>

Configuring Global Context

Set these on window.smarttouch (typically once, near the top of the page) so they're automatically included on every tracked event:

window.smarttouch.website = 'Sunset Ridge Microsite'; // stLocation
window.smarttouch.community = 'Sunset Ridge'; // stCommunity
window.smarttouch.builder = 'ABC Homes'; // stBuilder
window.smarttouch.floorplan = 'The Oakwood'; // stFloorplan
window.smarttouch.spec = 'Lot 42'; // stSpec