Read on if you are using the Pop-Up or Embedded Checkout widget on your website and you want to track conversions and analytics. If you are using any other widget, you don’t need to set up Humanitix Echo.
If you’re integrating Humanitix with your website and looking to track customer behaviour and conversions with either Google Analytics 4 or a Meta Pixel, you may want to configure both your widget and landing page to ensure analytics events and conversions are recorded on your domain, rather than the Humanitix ticketing domain.
Capturing this data on your landing page will increase attribution and ensure Meta Pixel conversions are recorded on your own verified domain in compliance with Meta’s Aggregated Event Measurement functionality.
This guide is for advanced digital marketers with experience in configuring analytics tools. Whilst direct website coding experience is not required, familiarity with GTM Templates & Variables, iFrames and website scripts will be beneficial.
Track sales on the Humanitix event page versus your domain
Humanitix offers the ability to integrate your Google and Meta tracking pixels directly with your event page via your event's advanced > integrations page. These pages are hosted on the Humanitix ticketing domain and work great for most use cases, as it allows out-of-the-box interaction with these services and no additional configuration.
However, you may prefer to trigger and track conversion events directly on your domain, especially if you run ads through the Meta Business Suite.
(Meta’s Aggregated Event Measurement functionality requires verifying ownership on the domains on which you track conversions).
There are two options to track sales on your domain:
Redirect buyers to your domain post-purchase - [ Easiest ]
Direct buyers to the Humanitix event page to complete their purchase and utilise our custom redirect tool to return customers to your landing page post-purchase. On your landing page, trigger a purchase conversion.
Embed the Pop-Up/Embedded Checkout widget and integrate Humanitix Echo - [ More difficult] Allow buyers to checkout on your website by using the pop-up or embedded checkout widgets. Utilise our ‘Humanitix Echo’ integration to listen to analytics events being ‘broadcasted’ from the widget and respond by triggering the relevant analytics or conversion events on your domain.
Option 1 is simpler in its setup but will only track the final purchase event, missing out on tracking events during the checkout process.
This guide will focus on Option 2, which enables richer analytics and conversions with high attribution.
You will need:
Access to a Humanitix event and its ‘embedded widget' configuration
Google Tag Manager installed on your website, OR access to the configuration of your website’s HTML
How to add an embedded checkout widget on your website
Manage your event
Navigate to design & comms > embedded widgets via the left-hand menu bar
Select the Pop-Up or Embedded Checkout tabs.
Important: Toggle ON the Disable analytics integrations option.
This will prevent default analytics integrations from being installed within the widget itself and avoid duplicate events/conversions being sent.Copy the iframe code and install it on your desired page.
See our full guide on embedded widgets
Install Humanitix Echo with Meta Pixel only
If you only plan to track conversions using your Meta Pixel to optimise your Meta Advertising Spend and don’t have Google Tag Manager installed on your website, you can directly install the Humanitix Echo integration on your site.
If you’ve deployed your Meta Pixel to your website using Google Tag Manager, check out the next section, which offers an easier installation method.
The Humanitix Echo script will listen to analytics events broadcasted by any Humanitix embedded checkout widget and check if a Meta Pixel is installed on your website. If so, it will automatically make a fbq(...) event call, along with relevant checkout information such as value and currency.
To install Humanitix Echo directly on your website:
Navigate to the section of your website builder where you can control the
<head>code. You may need to contact your web developer for assistance if you're not using a website builder.In the code editor, paste and save the following code. Ensure that this applies to any page where a Humanitix Embedded Widget is installed (or include it on every page for consistency)
<!-- Humanitix Echo --> <script src="https://static.humanitix.com/ticketing/echo.js" async></script>
Once installed, open Meta Pixel Test Events and debug your landing page. Run a test transaction through the Humanitix Widget and verify that you can see the relevant events in the Test Events tool.
Install GA4 and/or Meta Pixel Connection using Google Tag Manager
You can also install Humanitix echo using Google Tag Manager and which provides an easy way to deploy additional scripts and functionality to your website without updating your website’s code.
To install Humanitix Echo using Google Tag Manager:
Open your Google Tag Manager container from the Google Tag Manager website
Create a new Tag by navigating to Tags > New; Call your tag ‘Humanitix Echo’
Click on Tag Configuration and select Custom HTML from the list. In the code editor, paste in the below snippet:
<!-- Humanitix Echo --> <script src="https://static.humanitix.com/ticketing/echo.js" async></script>
4. Click on Triggering and select All Pages
5. Click save
Once you publish your Google Tag Manager container, Humanitix Echo will listen to any analytics events being broadcast and automatically push a new, custom event to the Data Layer.
Humanitix Echo will also automatically detect if a Meta Pixel is installed on the page. If so, it will automatically send event and conversion data to your Meta Pixel as the customer progresses through the checkout widget.
You can stop here if you only need to track Meta Pixel conversions! ✅
Make sure to verify the integration using the Meta Pixel Test Events tool.
If you need to configure GA4 tracking, read on.
Connect Humanitix Echo to GA4
Now that Humanitix Echo is installed on your site, you’ll need to configure your container to listen to events sent by Humanitix Echo and trigger a Google Analytics 4 event in response.
To configure your GTM container to listen to Humanitix Echo:
Log into your Google Tag Manager account
Navigate to triggers > new. Call your new trigger ‘Humanitix Echo Trigger’
Click trigger configuration and select the custom event option
In the Event Name field, enter exactly:
hx-echoand leave all other settings > click saveNavigate to variables > user-defined variables > new. Call your new variable ‘Humanitix Echo Event Name’
Click variable configuration and select the data layer variable option
In the data layer variable name field, enter exactly:
hx_echo_eventand leave all other settings > click save.Navigate to tags > new. Call your new tag ‘Humanitix Echo to GA4 Event’
Click tag configuration and select the Google Analytics: GA4 Event option
Under the configuration tag, select the existing GA4 Configuration tag you created when setting up GA4 in Google Tag Manager
In the event name field, click the building block icon and select the ‘Humanitix Echo Event Name’ variable you created
Click the more settings option. Under ecommerce, check the box called ‘Send Ecommerce Data’. Leave the data source as ‘Data Layer’.
Finally, click triggering and select the Humanitix Echo Trigger option > click save.
You will now need to test the integration. Click the Preview button in the top right-hand corner. In the new window, enter your website URL containing the Buy Tickets widget and click Connect. In a separate tab, open up the Debug View for your GA4 account.
Purchase a test ticket via the Buy Tickets widget. You should see Ecommerce events appear in the Debug View, such as Begin Checkout and Add Shipping Info.
This indicates your GA4 account is listening to the Humanitix Buy Tickets widget.
Advanced Connections to other providers using Google Tag Manager
Beyond Google Analytics 4 events, Google Tag Manager enables digital marketers to deploy any script or tracking pixel. Whilst Humanitix doesn’t provide out of the box support for every possible pixel, Humanitix Echo will update the Google Tag Manager data layer with key Ecommerce information as customers progress through the checkout.
By creating your own custom variables and listening to Humanitix Echo events, you can set up your own analytics integrations as is required.
Listening to Humanitix Echo Events
Humanitix Echo will push a new event to the Data Layer during key checkout phases. These events are all called hx-echo. The underlying customer event is passed as a variable in the data layer called hx_echo_event, and Ecommerce information about the action being taken by the customer is passed as a separate variable in the data layer called ecommerce.
To trigger your own custom integrations: You should create a Custom Event Trigger in GTM with hx-echo as the event. In your tags, you can then consume the data layer variables hx_echo_event and ecommerce to take the appropriate action.
Data Layer Event Reference
Whilst all fired events are pushed using hx-echo as the event name, the underlying event taken by the customer is available in the hx_echo_event data layer variable. The possible values for this variable correspond to the Google Tag Manager event reference table here.
Data Layer Variable Reference
Similarly, the available variable data pushed with each of the events corresponds to the standard Humanitix Google Tag Manager events, which can be found in the variable reference table here.