Track widget drop-off by triggering events at each step of the booking journey and sending virtual page views to Google analytics. This setup helps you understand where users abandon the process.
⚠️ Warning: Your custom success page won't work if you are using an Iframe, either embed your widget with the standard code or use an external widget URL.
Track your widget drop off
Below you can find guidance on all steps to track your widget drop off.
Create your GTM container
Follow the steps below to create your GTM container:
Login to your tag manager.
Click the three dots on the top right.
Click Create Container.
Add your container name.
Click Web.
Click Create.
Copy the code on the top right corner, it should look like GTM-xxxxxx.
Add the Google ID to ResDiary
Follow the steps below to add your Google container ID to your diary:
Click Settings, then Widget Tracking.
Select Google tag manager.
Paste the ID on the text field.
Click Update.
Create your custom variables
Follow the steps below to create your custom variables on Google tag manager:
From your tag manager, click the new container.
Click Variables, then New.
Click Variable contifuration.
Select a data layer variable form the variable types.
Add exactly namevirtualPageURL as variable name, it is case sensitive.
Select layer version two.
Repeat the steps above to add a second variable.
Ensure this variable is named virtualPageTitle, it is case sensitive.
Select layer version two.
Create your custom trigger
Follow the steps below to create your custom trigger on Google tag manager:
From your tag manager, click Triggers.
Click New, then Trigger configuration.
Select a custom event from the list.
Add VirtualPageview as an event name, it is case sensitive.
Select trigger fires on some custom events.
Then add event contains VirtualPageview.
Create your new tag
Follow the steps below to create your new tag on Google tag manager:
From your tag manager, click Tags.
Click New, then Tag configuration.
Select universal analytics from the list.
Select pageview from the track type.
Select new variable from the Google analytics settings.
Complete the following fields:
Enter your tracking ID.
Set cookies to auto.
Click More Settings, then Fields to Set.
Add the following fields:
Set page as name and {{virtualPageURL}} as value.
Set title as name and {{virtualPageTitle}} as value.
Click Triggering.
Select the VirtualPageview trigger.
Test your widget drop off
Follow the steps below to test and preview your widget drop offs:
From your tag manager, click Preview.
Load the page that contains your widget on another page.
Create a booking in the widget.
You should see an event fired on Tag manager for each page.
Below is a list of events being tracked:
virtualPageURL | virtualPageTitle |
/resdiary-widget/venueSelection | Select a venue. |
/resdiary-widget/initial | Select covers, date and time. |
/resdiary-widget/promotion | Select a promotion. |
/resdiary-widget/confirmation | Confirm booking request details. |
/resdiary-widget/contact | Enter contact details. |
/resdiary-widget/success | Booking was successful. |
/resdiary-widget/payment | Enter credit card details. |
/resdiary-widget/error | Error details. |
Set your Google analytics goal
Below you can find the steps to setup your conversion goal on Google analytics:
Set your conversion goal with custom success page
Follow the steps below to set your Google analytics goal with custom success page:
Go to your Google analytics property.
Click the Admin panel.
Click Goals.
Click New goal.
Select Custom, then click Continue.
Give it a name and select the destination as type.
From goal details, set destination to regular expression.
Add resdiary\-widget\/success on the text field.
Enable Funnel.
Add the following details:
Name | Screen or page |
Select covers, date and time. | resdiary\-widget\/initial |
Select promotion, optional. | resdiary\-widget\/promotion |
Enter contact details. | resdiary\-widget\/contact |
Confirm booking request details. | resdiary\-widget\/confirmation |
Enter credit card details, optional. | resdiary\-widget\/payment |
Set your conversion goal without custom success page
Follow the steps below to set your Google analytics goal with no custom success page:
Go to your Google analytics property.
Click the Admin panel.
Click Goals.
Click New goal.
Select Custom, then click Continue.
Give it a name and select the destination as type.
From goal details, set destination to regular expression.
Add booking-successful on the text field.
Enable Funnel.
Add the following details:
Name | Screen or page |
Select covers, date and time. | resdiary\-widget\/initial |
Select promotion, optional. | resdiary\-widget\/promotion |
Enter contact details. | resdiary\-widget\/contact |
Confirm booking request details. | resdiary\-widget\/confirmation |
Enter credit card details, optional. | resdiary\-widget\/payment |
You can test your conversion by following the steps below:
From your analytics dashboard click Conversions.
Click Goals, then Funnel Visualisation.
Select your goal.