NOTE: The GatedContent.com 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
gateInstance.id;

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


Gate methods

// Check if a gate is currently open; returns true or false
gateInstance.gateOpen();

// Get a config attribute from the gate, e.g. gateType
gateInstance.getConfigAttribute('gateType');

// You can retrieve any gate attribute that can be set in the gate 
// editor, e.g. formType, lang, downloadUrl etc.
gateInstance.getConfigAttribute('formType');


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.
gateInstance.form.getFieldById("email");

// Loop through every field on the form to do something with each one
gateInstance.form.eachField(function(field){
    // 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.

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

// Get the current value of this field
emailField.getValue();

// 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");
optinCheckboxField.check(true);
optinCheckboxField.uncheck(true);

// Change the options for a select field
var industryField = gateInstance.form.getFieldById("industry");
industryField.setOptions([
	{
		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
emailField.hide();
emailField.show();