4 min read Updated

How to integrate GA Connector if your form plugin doesn’t allow customization of id, class or name attributes

The instructions below apply to Cookie-Based integration.

If you are using API-Based integration, please note that you will need to follow the Cookie-Based integration steps instead.

Not sure which instructions to follow? Start here: How to Check Which GA Connector Integration Type You’re Using.

GA Connector relies on your hidden input fields’ attributes so that it would be able to find them and fill them with tracking information. Our default GA Connector script will be able to fill your hidden fields with tracking information as long as you are able to set their id/name with its equivalent GA Connector ID.

However, there are cases where the third-party form plugin that you are using doesn't allow you to control the form’s attributes and customize its input class or ID. For these cases, we have prepared specific instructions on how to integrate GA Connector with your form.

If your form doesn’t allow you to customize the class/id attributes but you are able to set a default value

  1. Create an input element and have it set to “hidden”
  2. Add a default value to the input element you’ve just added. The default value must be equivalent to the field that you are trying to track. See the table below for the full list of fields that you can track using GA Connector.
Label Input ID Label Input ID
All Traffic Sources gaconnector_all_traffic_sources Last Click Campaign gaconnector_lc_campaign
Browser gaconnector_browser Last Click Channel gaconnector_lc_channel
City (from IP address) gaconnector_city Last Click Content gaconnector_lc_content
Country (from IP address) gaconnector_country Last Click Landing Page gaconnector_lc_landing
First Click Campaign gaconnector_fc_campaign Last Click Medium gaconnector_lc_medium
First Click Channel gaconnector_fc_channel Last Click Referrer gaconnector_lc_referrer
First Click Content gaconnector_fc_content Last Click Source gaconnector_lc_source
First Click Landing Page gaconnector_fc_landing Last Click Term gaconnector_lc_term
First Click Medium gaconnector_fc_medium Last Click Timestamp gaconnector_lc_timestamp
First Click Referrer gaconnector_fc_referrer Longitude gaconnector_longitude
First Click Source gaconnector_fc_source Latitude gaconnector_latitude
First Click Term gaconnector_fc_term Number of Website Visits gaconnector_page_visits
First Click Timestamp gaconnector_fc_timestamp Operating System gaconnector_OS
Google Analytics CID gaconnector_GA_Client_ID Device gaconnector_device
Google Analytics Measurement ID gaconnector_GA_Measurement_ID Region gaconnector_region
Google Analytics Session ID gaconnector_GA_Session_ID Pages Visited gaconnector_pages_visited_list
Google Click Identifier gaconnector_gclid Time Spent on Website gaconnector_time_passed
IP Address gaconnector_ip_address Time Zone gaconnector_time_zone

If your form doesn’t allow you to customize the class/id attributes and you are unable to set a default value

  1. Create the hidden input elements in your form editor and publish it. (This is because we need to list down the created input element’s ID/class)
  2. Open up page inspector (cmd + shift + c for MacOS, ctrl + shift+ c for Windows) and look for the created input and list down its class or ID
  3. Modify the code below and add the GA Connector field ID (without the "gaconnector_" prefix) along with the class/id of the input you’ve created.
    Example: You want to track the field ‘All Traffic Sources’. Add the equivalent id of the field and on the right side of the code, add id/class of the hidden input you’ve created for it in quotation marks. (repeat this for all the fields that you need to track)all_traffic_sources: 'id-of-created-input',
    HTML
    <script>
/* Add GA Connector field ID name and the class/id/name of the input you've created */
 var fieldMapping = {
 all_traffic_sources: 'sample1-input-id',
 lc_source: 'sample2-input-class',
 fc_referrer: 'sample3-input-name',
 }
</script>
  4. After adding all the fields that you need. Install the code that you have modified above in the <head> of your website.
  5. Add the code below in the <head> of your website, this needs to be placed right after the fieldMapping code that you have just added.
    HTML
    <script data-cfasync="false" type="text/javascript" src="https://tracker.gaconnector.com/gaconnector.js"></script>
<script>
function setGaconnectorHiddenFieldsViaMapping() {
 var gaFields = gaconnector.getCookieValues();
 for (var gaconnectorField in fieldMapping) {
 var selectors = "input[name='" + fieldMapping[gaconnectorField] + "'], " + "input[class='" + fieldMapping[gaconnectorField] + "'], " + "input[id='" + fieldMapping[gaconnectorField] + "']";
 var inputs = document.querySelectorAll(selectors);
 if (inputs !== null) {
 for (var i = 0; i < inputs.length; i++) {
 inputs[i].value = gaFields[gaconnectorField];
 }
 }
 }
}
gaconnector.setCallback(setGaconnectorHiddenFieldsViaMapping);
setInterval(setGaconnectorHiddenFieldsViaMapping, 1000);
</script>
  6. Done! You should now have tracking information filling up your hidden fields.