Tally Forms Event Listener

If Tally Forms are implemented on your website, the utilisation of the Tally Forms event listener, in conjunction with Google Tag Manager, allows you to capture successful Tally Form submissions as conversion actions in your analytics platforms (such as Google Analytics, Piwik Pro, etc.) and advertising platforms. This event listener generates a dataLayer event that you can employ to trigger your marketing tags/pixels.

How to track Tally Forms Submissions with google tag manager

Effortlessly track successful Tally Form submissions as conversions by utilising Google Tag Manager with the Tally Form event listener. The process is streamlined and can be initiated as follows:

Commence by creating a custom HTML tag in Google Tag Manager. Copy the Tally Forms event listener code, paste it into the tag, and associate it with a pageview or DOM-ready trigger.

Pro Tip: Opt for executing the code on a DOM-Ready trigger type.

The subsequent step involves creating a custom event trigger that exclusively occurs upon successful form submissions, bearing the event name [tally_form_submit].

Subsequently, seamlessly activate your marketing conversion tags/pixels through the custom event you’ve established for successful Tally Form submissions, denoted as [tally_form_submit].

Additionally, implement your analytics event and conversion tags, such as Google Analytics (GA4) event tags, Piwik Pro, Mixpanel, etc.

Ensure thorough testing of your setup before finalising and publishing.

🏆 Credit: This code was created and is owned by Courtney at Code and Tonic.

<script>
// code source is from Courtney at Code and Tonic (read here https://codeandtonic.com/blog/tally-forms-conversion-tracking)
// Determine if the browser supports "addEventListener" or "attachEvent" for event listening
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";

// Assign the event listener function to "eventer" based on what the browser supports
var eventer = window[eventMethod];

// If the browser uses "attachEvent", use "onmessage". Otherwise, use "message"
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Set up the event listener for messages from the child iFrame
eventer(messageEvent,function(e) {
// Check if the event contains "message" or "data" and assign the data to the "data" variable
var key = e.message ? "message" : "data";
var data = e[key];

// If the event data contains "event", we'll proceed further
if(data.includes("event")) { 
// Parse the JSON string from the event data
var dataParsed = JSON.parse(data);

// Check if the event is a "Tally.FormSubmitted" event
if(dataParsed.event == "Tally.FormSubmitted"){
// If the Tally form is submitted, push the 'tally_form_submit' event to the Data Layer
// Initialize the Data Layer if it doesn't already exist
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'tally_form_submit'
});
}
}
});
</script>