Custom Forms Data Layer Examples
Learn more about how ListenLayer generates powerful data layers from the HTML Forms activity on your website. The data layer is a unique object in the browser reserved for holding measurement data. Events and variables that appear in the data layer can be referenced inside Google Tag Manager to power your analytics and conversions tracking.
Custom Data Layer Events
Like the ones shown here, generate data layer events when Custom Forms activity occurs on your website or landing pages. Collect data and trigger conversions every time forms load, validation fails, or form submissions are successful. You can even track comprehensive activity from forms inside iframes!
Unlike GTM’s “form submission trigger,” our Listeners are built with extreme accuracy so that you can rely on them for true conversion tracking. ListenLayer also allows you to customize your data layers and monitor activity to receive notifications when anomalies occur.
event: 'customFormLoaded',
event: 'customFormSubmitted',
event: 'customFormValidationFailed',Track Custom HTML Forms In Iframes
Finally! You can track forms from inside of iframes accurately and with ease! Place a simple script inside your iframes to enable all of the powerful features of ListenLayer.
<!--ListenLayer.com - Custom Forms Helper Script-->
<script>(function(w,d,s){var f=d.getElementsByTagName(s)[0],j=d.createElement(s);j.async=true;j.src='https://assets.listenlayer.com/datalayercustomformhelper.min.js';f.parentNode.insertBefore(j,f);})(window, document, 'script');</script>Automatic Data Layer Values
ListenLayer pushes critical information from your website forms into the data layer automatically. Automatic values are pushed into the data layer inside an element called formAutomaticValues, as shown here. This includes form ID, CSS ID, CSS class, and details about every field on the form. The location of the form on your website is also pushed into the data layer automatically.
formAutomaticValues: {
formID: "form4",
formCSSID: "form4",
formCSSClass: "custom-form-4 custom-form-style init",
formFieldValues: {
your_full_name: {
id: "full-name",
value: "test",
label: "Your Full Name*",
name: "your_full_name",
type: "text"
},
short_description: {
id: "short-description",
value: "test",
label: "Short description*",
name: "short_description",
type: "textarea"
},
cars: {
id: "cars",
value: "First Choice",
label: "Select an option*",
name: "cars",
type: "select-one"
}
},
formLocation: {
url: "https://demo.hostedstaging.com/custom-forms/",
tld: "hostedstaging.com",
hostname: "demo.hostedstaging.com",
pathname: "/custom-forms/",
queryString: null,
fragment: null,
protocol: "https",
originPathName: "https://demo.hostedstaging.com/custom-forms/"
}Custom Data Layer Values
Using data from your form, website, and user activity, ListenLayer allows you to write powerful rules that generate custom data layer values. With this feature, data collection and marketing analytics becomes nearly limitless!
Examples of popular custom data layer values for Custom Forms:
- Fire or segment conversions (or change conversion values) based on form quality using a visitor’s email address (i.e., @gmail.com emails might be less valuable to your organization).
- Categorize Custom Forms across your website and use these categories to organize conversion activity.
- Chain multiple Custom Forms into a multi-step experience and label each step’s number.
Amplify your website analytics with powerful custom data layer values for Custom Forms, with no programming required!
formCustomValues: {
//custom variable values display here based on rules you write
formCategory: 'Demo',
formName: 'Landing Page Demo Form',
formQuality: 'Low'
},Ready to Dive In?
See how easy (and powerful) ListenLayer is by opening an account today or requesting a demo.