Integrating GA Connector with HighLevel (GoHighLevel)

The instructions below apply to Cookie-Based integration.

If you are using API-Based integration, simply add the GA Connector script to both your main website and inside the HighLevel form iframe. No additional steps are required.

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

Prerequisites

• Ensure that either the GA Connector WordPress plugin or the GA Connector script is installed on your website.

 Create GA Connector fields in HighLevel

1. Navigate to your HighLevel dashboard and go to Settings > Custom Fields.
2. Click on Add Field and create a Single Line field for each GA Connector field you wish to track.
3. Refer to the table below for a comprehensive list of GA Connector fields and their corresponding Input IDs.
   

   Label	Input ID	Label	Input ID
   All Traffic Sources	all_traffic_sources	Last Click Campaign	lc_campaign
   Browser	browser	Last Click Channel	lc_channel
   City (from IP address)	city	Last Click Content	lc_content
   Country (from IP address)	country	Last Click Landing Page	lc_landing
   First Click Campaign	fc_campaign	Last Click Medium	lc_medium
   First Click Channel	fc_channel	Last Click Referrer	lc_referrer
   First Click Content	fc_content	Last Click Source	lc_source
   First Click Landing Page	fc_landing	Last Click Term	lc_term
   First Click Medium	fc_medium	Last Click Timestamp	lc_timestamp
   First Click Referrer	fc_referrer	Longitude	longitude
   First Click Source	fc_source	Latitude	latitude
   First Click Term	fc_term	Number of Website Visits	page_visits
   First Click Timestamp	fc_timestamp	Operating System	OS
   Google Analytics CID	GA_Client_ID	Device	device
   Google Analytics Measurement ID	GA_Measurement_ID	Region	region
   Google Analytics Session ID	GA_Session_ID	Pages Visited	pages_visited_list
   Google Click Identifier	gclid	Time Spent on Website	time_passed
   IP Address	ip_address	Time Zone	time_zone

Update your Forms

1. For each of your forms, add the GA Connector custom fields you’ve created.
2. Update the Query Key of each added field to match the corresponding GA Connector Input ID from the table above (e.g., for “Last Click Source,” use lc_source).
   
3. Ensure that the added fields are set to Hidden.
4. After adding all necessary fields and setting their Query Keys, insert an HTML form element at the bottom of your form.
5. Add the following script to the HTML form element:
   
   <script> /* For security, Add Domain of the parent site where the form will be embedded */ var allowedOrigins = ['https://yourdomainhere.com']; var receiveGaconnectorData = function(event) { if (!allowedOrigins.includes(event.origin) || !event.data.lc_source) return; var gaFields = event.data; for (var fieldName in gaFields) { var selectors = "input[data-q='" + fieldName + "']"; var inputs = document.querySelectorAll(selectors); if (inputs !== null) { for (var i = 0; i < inputs.length; i++) { inputs[i].value = gaFields[fieldName]; inputs[i].dispatchEvent(new Event('input')); } } } }; window.addEventListener('message', receiveGaconnectorData); </script>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   <script> /* For security, Add Domain of the parent site where the form will be embedded */ var allowedOrigins = ['https://yourdomainhere.com'];   var receiveGaconnectorData = function(event) {     if (!allowedOrigins.includes(event.origin) || !event.data.lc_source) return;     var gaFields = event.data;     for (var fieldName in gaFields) {         var selectors = "input[data-q='" + fieldName + "']";         var inputs = document.querySelectorAll(selectors);         if (inputs !== null) {             for (var i = 0; i < inputs.length; i++) {                 inputs[i].value = gaFields[fieldName];                 inputs[i].dispatchEvent(new Event('input'));             }         }     } }; window.addEventListener('message', receiveGaconnectorData); </script>

   
   Replace ‘https://yourdomainhere.com’ with the actual domain where your form is hosted.
6. Save your form.

Add Supplemental Code to Your Website

1. Add the following code to the pages of your website where your forms are embedded.
   
   <script> /* Add the CSS selectors of the iframes to the array, e.g */ var iframeSelectors = ['iframe[data-form-id][data-layout]']; document.addEventListener("DOMContentLoaded", (event) => { function postMessageToGhl() { var gaFields = gaconnector.getCookieValues(); setInterval(function() { var formIframes = document.querySelectorAll(iframeSelectors); if (formIframes !== null) { for (var i = 0; i < formIframes.length; i++) { formIframes[i].contentWindow.postMessage(gaFields, "*"); } } }, 1000); } postMessageToGhl(); </script>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   <script> /* Add the CSS selectors of the iframes to the array, e.g */ var iframeSelectors = ['iframe[data-form-id][data-layout]']; document.addEventListener("DOMContentLoaded", (event) => {     function postMessageToGhl() {         var gaFields = gaconnector.getCookieValues();         setInterval(function() {             var formIframes = document.querySelectorAll(iframeSelectors);             if (formIframes !== null) {                 for (var i = 0; i < formIframes.length; i++) {                     formIframes[i].contentWindow.postMessage(gaFields, "*");                 }             }         }, 1000);     }     postMessageToGhl(); </script>

That’s it! Once a web visitor submits your form, the contact created should contain Google Analytics data.

Need help with integrating HighLevel with GA Connector? Feel free to send us a message here!