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
- Create an input element and have it set to “hidden”
- 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 | Latitude | gaconnector_latitude |
| First Click Referrer | gaconnector_fc_referrer | Longitude | gaconnector_longitude |
| First Click Source | gaconnector_fc_source | Number of Website Visits | gaconnector_page_visits |
| First Click Term | gaconnector_fc_term | Operating System | gaconnector_OS |
| Google Analytics CID | gaconnector_GA_Client_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 |
| Region | gaconnector_region | Device | gaconnector_device |
If your form doesn’t allow you to customize the class/id attributes and you are unable to set a default value
- 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)
- 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
- 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’,
12345678<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> - After adding all the fields that you need. Install the code that you have modified above in the <head> of your website.
- 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.
1234567891011121314151617<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> - Done! You should now have tracking information filling up your hidden fields.