Usage
nebula.updateFormFlow(formID, field, info)
Parameters
formID
(Required) (String) A unique ID of the form
Default: None
field
(Required) (String) The name of the form field or event action
Default: None
info
(Optional) (String) Additional information
Default: None
Parameter Notes
Form flow data is stored in a window object called formFlow. The form ID is used as a key to store the field data.
Additional Notes
This function concatenates the new field/event to the existing string and then sets a custom dimension (if used). As the user moves through the form, the data is sent to Google Analytics scoped to their session.
Abandonment can be deciphered when the form flow does not end with a [success].
This function is already built into Contact Form 7 detections, but can be manually added to other forms too.
Source File
Located in /assets/js/modules/forms.js on line 473.
No Hooks
This function does not have any filters or actions available. Request one?Note: This function contains 1 to-do comment.
nebula.updateFormFlow = function(formID, field, info = ''){
if ( typeof nebula.formFlow === 'undefined' ){
nebula.formFlow = {};
}
if ( !formID ){
return false;
}
if ( info !== '' ){
if ( info.length > 25 ){
info = info.substring(0, 25) + '...'; //Truncate long info text
}
info = ' (' + info + ')';
}
if ( nebula.formFlow[formID] ){ //If this form ID already exists
nebula.formFlow[formID] += ' > ' + field + info; //Append the next field to the string
} else {
nebula.formFlow[formID] = formID + ': ' + field + info; //Otherwise start a new form flow string beginning with the form ID
}
//Set the user property. @todo "Nebula" 0: When GA4 allows session-scoped custom dimensions, update this to session scope!
gtag('set', 'user_properties', {
form_flow: nebula.formFlow[formID]
});
//Update or create a hidden field
if ( jQuery('#' + formID + ' #nebula-form-flow').length ){
jQuery('#' + formID + ' #nebula-form-flow').val(nebula.formFlow[formID]);
} else {
jQuery('#' + formID + ' form').prepend(jQuery('<input type="hidden" id="nebula-form-flow" name="_nebula_form_flow" class="hidden">').attr({
value: nebula.formFlow[formID],
style: 'display: none;'
}));
}
return nebula.formFlow[formID];
};
Override
To override or disable this JavaScript function, simply redeclare it with the exact same function name. Remember: Some functionality is conditionally loaded via dynamic imports, so if your function is not overriding properly, try listening for a DOM event (described below).
For non-module import functions:
nebula.updateFormFlow = function(formID, field, info){
//Write your own code here, leave it blank, or return false.
}
For dynamically imported module function overrides:
jQuery(window).on('load', function(){
nebula.updateFormFlow = function(formID, field, info){
//Write your own code here, leave it blank, or return false.
}
});
Custom Nebula DOM events do also exist, so you could also try the following if the Window Load listener does not work:
jQuery(document).on('nebula_module_loaded', function(module){
//Note that the module variable is also available to know which module specifically was imported
if ( typeof nebula.updateFormFlow === 'function' ){
nebula.updateFormFlow = function(formID, field, info){
//Write your own code here, leave it blank, or return false.
}
}
});