How to Track Acuity Scheduling Conversions Easily With Google Tag Manager
The built-in integrations for Acuity Scheduling simply suck - sorry to say it like that but they do. They never work as intended and are very limited in what direct plug-ins you can choose from.
This method enables you to track conversion with any platform by utilizing Google Tag Manager. In order to do this we'll create an event in the Data Layer of GTM so that you can call on it as a trigger for any conversion pixel you need.
Let's get started!
First let’s create the custom event
Within Acuity locate Integrations
Click Edit on Custom Conversion Tracking
Paste this code into the box
<script> try { var postobject = JSON.stringify({ event: "AcuityEvent", Email: "%email%", ID: "%id%", Type: "%type%", AppointmentType: "%appointmentType%", FullName: "%calendar%", }); window.parent.parent.postMessage(postobject, "*"); } catch(e){ window.console.log('error') } </script>
This will create the event every time a conversion happens. You'll use this to call on within Google Tag Manager
Now we'll capture and store that event
Open Google Tag Manager
Create a new Tag called iframe Receiver
Select Custom HTML
Paste this code into the box
<script> window.addEventListener('message', function(ev){ if(JSON.parse(ev.data).event === 'AcuityEvent'){ window.dataLayer = window.dataLayer || []; dataLayer.push({ event: JSON.parse(ev.data).event, fullName: JSON.parse(ev.data).FullName, Email: JSON.parse(ev.data).Email, ID: JSON.parse(ev.data).ID }) } }); </script>
This will capture the Acuity event in the above section and store it in the data layer.Set the Trigger to all pages
Set the Event as a Trigger for your tracking
Next, within Google Tag Manager create a new Trigger called Acuity Event
Select Custom Event
Set the Event Name to AcuityEvent
And fire this trigger on all custom events
Set your Conversion Tracking for whatever platform you wish and set your trigger to your new custom event (Acuity Event)
Publish and test 🎉