NOTE: The developer JavaScript API is a beta feature. As such it is subject to change with no notice, and may contain unstable features. Please report any bugs that you find.

The GCDC script dispatches various custom window-level events through it's life cycle. You can bind to these events to implement your own custom, on-page logic. This functionality can be utilised to do things like:

  • Change the value of fields on a form on the basis of custom business logic
  • Perform a custom action on the page on a form load or form submit
  • Change the available options within a dropdown based on external data

An example of how to bind to a GCDC event is shown in the code below. NOTE: Your code MUST be executed BEFORE the GCDC script loads and begins to execute. This can normally be achieved by placing your code inline on the page.

// Bind to the GCDC script setup complete event
window.addEventListener('gcdcSetupComplete', function(event){
	var gcdcObj = event.detail;

	// Take some action here

// Bind to the GCDC gate ready event
window.addEventListener('gcdcGateReady', function(event){
	var gateInstance = event.detail;
	// Take some action here

Available events

The following table lists the complete set of custom events you can attach listeners to:

Event nameTriggerCan fire multiple timesValue of event.detail
gcdcSetupCompleteFires once when the GCDC script has finished setting up, but BEFORE any gates have been initialised.NThe main GCDC object in browser memory. Use this to interact with the GCDC on-page application.
gcdcGateReadyFires every time a gate has finished building.YThe gate instance which has loaded. Use this to interact with the gate and it's form.
gcdcGateSubmitFires every time a form is about to submit. This event fires AFTER successful validation, but BEFORE any data leaves the page.YThe gate instance which is about to submit. Use this to interact with the gate and it's form.
gcdcGateSubmittedFires every time a form has submitted. This event fires AFTER submission has completed and data has left the page.YThe gate instance which has submitted. Use this to interact with the gate and it's form.
gcdcModalOpenedFires every time a GCDC modal opens.YThe main GCDC object in browser memory. Use this to interact with the GCDC on-page application.
gcdcModalClosedFires every time a GCDC modal closes.YThe main GCDC object in browser memory. Use this to interact with the GCDC on-page application.

Useful properties and methods

The following code samples demonstrate some useful methods you can use to interact with gates from within a gcdcGateReady, gcdcGateSubmit or gcdcGateSubmitted event listener. Each of these examples assumes you have assigned the value of event.detail to a local variable called gateInstance, as shown in the example code above.

Gate ID

// Get the ID of a gate;

// You can use this to check if this is a specified gate:
if ( === "a123a-a123a-a123a-a123") {
    // Do something with this gate...

Gate methods

// Check if a gate is currently open; returns true or false

// Get a config attribute from the gate, e.g. gateType

// You can retrieve any gate attribute that can be set in the gate 
// editor, e.g. formType, lang, downloadUrl etc.

Form methods

// Request fields by their GCDC ID. Field IDs are listed in the admin area.
// This is normally, but not always, the same as the field's HTML name.

// Loop through every field on the form to do something with each one
    // Do something with field here

Field methods

Note that you should always interact with fields via GCDC methods where available, especially when setting or getting values. If you do this directly using the native javascript .value property, GCDC will not be able to track the value of the field which may result in unexpected behaviour on the page. Importantly, you should avoid directly manipulating the underlying DOM element for the field, as this can cause unexpected bugs.

// Let's get a field to work with...
var emailField = gateInstance.form.getFieldById("email");

// Get the current value of this field

// Set a new value for this field. The second parameter causes any rules watching
// this field to update and should normally be set to true
emailField.setValue("a new value", true);

// Check or uncheck the field if it is a checkbox
var optinCheckboxField = gateInstance.form.getFieldById("optinCheckbox");

// Change the options for a select field
var industryField = gateInstance.form.getFieldById("industry");
		value: "option1", //the html value for this option
		description: "Option 1" // the label displayed to the user
		value: "option2",
		description: "Option 2"
		value: "option3",
		description: "Option 3"

// Show or hide a field - note that rules can override this

email.hidden; // <- This indicates if the field is currently hidden or not. This includes cases where the field is on a multistep form but is not displayed on this step, conditions, switchable fields etc.

// Get DOM elements associated with the field
emailField.elem; // <- This is the wrapping DIV element that contains the field, it's label, and any associated elements
emailField.inputElem; // <- This is the actual field input element
emailField.labelElem; // <- This is the field's label element

Working with JS objects retrieved within the event manager

The above method examples are primarily written for on-page JS that is using our JS API. However, the same methods are available when working with data sources within the event management area that return a JS object. The example below demonstrates two scenarios in this context:

// Loop through every field on the form to do something with each one
var gateInstance = gcdc.getValue("gateAttribute.gateObj");
    // Do something with field here

// Let's get the label of the last field that the user interacted with
var field = gcdc.getValue("formAttribute.lastInteractedFieldObject");
var fieldLabelText = field.labelElem.innerHTML;