HubSpot

From Growth Agency Wiki
Jump to navigation Jump to search

Note: the hubspot form object could be either "HubspotFormsV4" or "HubSpotForms", this can bee seen in console

Tracking In Tag Manager

<script>
window.dataLayer = window.dataLayer || [];

//listener for older version (v3) of HS forms
window.addEventListener('message', function(event) {
	if( event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted' ) {
		window.dataLayer.push({
		event: 'form_submission',
		form_id: event.data.id,
		conversion_id: event.data.data.conversionId,
		form_data: event.data.data.submissionValues,
	});
}
});

//listener for v4 HS forms 
window.addEventListener('hs-form-event:on-submission:success', function(event) {
	var hsform = HubspotFormsV4.getFormFromEvent(event);
	if (hsform) {
	hsform.getFormFieldValues().then(function(fieldValues) {
		var transformedData = fieldValues.reduce(function(obj, item) {
		var key = item.name.split('/')[1]; 
		if (key) {
			obj[key] = item.value;
		}
		return obj;
		}, {});

		window.dataLayer.push({
			event: "form_submission",
			form_id: hsform.getFormId(),
			conversion_id: hsform.getConversionId(),
			form_data: transformedData,
		});
	});
	}
});
</script>

GCLID Parameter

A hidden field will need to be set up specifically for the gclid.

The the below will need to be added as a custom HTML:

<script>

function query_param_get( param ) {
	var paramsString = window.location.search;
	var searchParams = new URLSearchParams(paramsString);
	return searchParams.get( param );
}

function store_value_once( key, val ) {
	if( key && val ) {
		if( typeof sessionStorage[key] == 'undefined' || !sessionStorage[key] ) {
			sessionStorage.setItem(key, val);
		}
	}
}

function get_value( key ) {
	if( sessionStorage[key] ) {
		return sessionStorage[key];
	}
	return false;
}

if (typeof jQuery != 'undefined') {
	jQuery( function() {

		var gclid = query_param_get( 'gclid' );

		if( gclid ) {
			// store gclid
			store_value_once( 'gclid', gclid );
		} else {
			// attempt to retrieve gclid
			if( get_value( 'gclid' ) ) {
				gclid = get_value( 'gclid' );
			}
		}

		if( gclid ) {
			if( typeof HubSpotForms != 'undefined' ) {
				hs_forms = HubSpotForms.getForms();
				for( var i = 0; i < hs_forms.length; i++ ) {
					hs_forms[i].setFieldValue('google_click_id', gclid);
				}
			}
		}

	});
}
</script>