HubSpot: Difference between revisions
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({ | |||
event: 'form_submission', | |||
form_id: event.data.id, | |||
conversion_id: event.data.data.conversionId, | |||
form_data: event.data.data.submissionValues, | |||
}); | }); | ||
} | } | ||
| Line 18: | Line 20: | ||
//listener for v4 HS forms | //listener for v4 HS forms | ||
window.addEventListener( | 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", | |||
form_id: hsform.getFormId(), | |||
conversion_id: hsform.getConversionId(), | |||
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>