👋 Start Here
Using the GoHighLevel integration, you will be able to track events in your funnels back to the correct ads or source. The setup instructions below will guide you on how to place the Cometly base code pixel in your funnel, and how to send events using the Cometly API from GoHighLevel Automations to Cometly.
Step 1: Install Cometly base code pixel in your funnel
GoHighLevel requires a different base code placement compared to other landing page / funnel builders.
GoHighLevel Base Code Pixel Installation Instructions
You need to place the Cometly base code in the <footer> on each specific page.
You CANT use the funnel wide 'body' tracking code area, it must be added to each specific page in the <footer>
The additional code snippet (event listener) must be added below the Cometly base code pixel
Disable 'Optimise Javascript' in the funnel settings.
If you are using an embedded GoHighLevel iframe form on your landing page you need to add the base code and additional code snippet to your GHL form. Please visit this resource to add to your GHL form.
Add additional code snippet (event listener) below the Cometly base code pixel in the <footer>
<script>
document.addEventListener("click", function(event) {
setTimeout(function() {
addEventListenersToInputs();
}, 500);
});
</script>
Use Cometly Pixel Helper (Google Chrome Plugin) To Test Form Capture
Step 2: Send events using GoHighLevel Automations or place browser events
Watch the videos below to learn how to send server events to GoHighLevel for any event. Below includes example setups for both sending leads and purchases.
If you plan to send a server event (via GHL automation), don't send the same event from your browser. You must choose either server or browser, not both.
Example Setup For Sending New Leads via Server-Side Automations
Trigger: contact created
Event: POST
Authorization: Bearer Token
Token (Bearer Token):
{{YOUR API TOKEN}}
Headers:
Accept | application/json |
Content-Type | application/json |
Body (Key and Value): (for sending lead event example)
event_name | lead_generated |
dynamic from GHL | |
full_name | dynamic from GHL |
phone | dynamic from GHL |
Example Setup For Sending Ecommerce Funnel Purchases via Server-Side Automations
You can use any trigger that you need depending on the action that you want to trigger the automation. The same logic will apply, you will just need to edit the trigger.
The setup video below is an example setup for when the trigger is a purchase that takes place online in your funnel.
Trigger: payment received
If your funnel has upsells, please see the section below.
Event: POST
Authorization: Bearer Token
Token (Bearer Token):
{{YOUR API TOKEN}}
Headers:
Accept | application/json |
Content-Type | application/json |
Body (Key and Value): (for sending purchase event example)
event_name | purchase |
dynamic from GHL | |
full_name | dynamic from GHL |
phone | dynamic from GHL |
amount | {{payment.total_amount}} |
Example Setup For Sending UPSELL Purchases via Server-Side Automations
You need to ensure that you follow the video step-by-step or you will not track upsells correctly and potentially cause tracking issues for your initial purchase.
Add the following to your Upsell workflow:
is_upsell | true |
Example for indicating the purchase is an upsell:
Tracking events via Browser Snippet Codes
Important: If you plan to send a server event, don't send the same event from your browser. You must choose either server or browser, not both.
If you want to place browser events in your funnel (example: add to cart, initiate checkout), you need to add in between the Cometly base code and the event listener.
If you are using GoHighLevel 'Forms'
If you are using GoHighLevel Forms, in order for the Cometly base code to automatically capture the first name, last name, full name, email, or phone number from a GoHighLevel iframe form, you need to install the Cometly base code directly on the form. Please watch the video for step-by-step instructions for how to implement.
You need to edit the form you are using in your pages, look for the HTML box in the menu on the left and drag/paste it inside the form.
Add the custom HTML block to the top of the form
On the right-side, open the HTML block and paste your Cometly base code into the HTML block and paste the additional code snippet (event listener) under the base code
Add the additional code snippet (event listener) below the Cometly base code:
<script>
document.addEventListener("click", function(event) {
setTimeout(function() {
addEventListenersToInputs();
}, 500);
});
</script>