HubSpot: Difference between revisions

From Growth Agency Wiki
Jump to navigation Jump to search
Created page with "== Tracking In Tag Manager == <pre> <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..."
 
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
Note: the hubspot form object could be either "HubspotFormsV4" or "HubSpotForms", this can bee seen in console
== Tracking In Tag Manager ==
== Tracking In Tag Manager ==


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


//listener for v4 HS forms  
//listener for v4 HS forms  
window.addEventListener("hs-form-event:on-submission:success", function(event) {
window.addEventListener('hs-form-event:on-submission:success', function(event) {
var hsform = HubspotFormsV4.getFormFromEvent(event);
var hsform = HubspotFormsV4.getFormFromEvent(event);
if (hsform) {
if (hsform) {
Line 31: Line 33:


window.dataLayer.push({
window.dataLayer.push({
event: "form_submission",
event: "form_submission",
form_id: hsform.getFormId(),
form_id: hsform.getFormId(),
conversion_id: hsform.getConversionId(),
conversion_id: hsform.getConversionId(),
form_data: transformedData
form_data: transformedData,
});
});
});
});
}
}
});
});
</script>
</pre>
== 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:
<pre>
<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>
</script>
</pre>
</pre>

Latest revision as of 14:31, 22 July 2026

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>