Skip to content
English
Go to Dineplan.com
  • There are no suggestions because the search field is empty.

Tracking Dineplan Bookings In GA4 Using Google Tag Manager

To track Dineplan bookings in GA4, add your GTM container ID in Dineplan, then create a custom event trigger and tag in GTM.

**Please note changes to our success event. Our new 2026 Booking Calendar is now available. If you install the new calendar on your website, you'll need to update your GTM trigger to listen for the new event name, successful_booking, instead of dpWidgetCompleteNew.

The new calendars will be rolled out globally in early September 2026. During a limited transition period, both dpWidgetCompleteNew and successful_booking events will be available to ensure a smooth migration.

First, you need to add your Google Tag Manager (GTM) Container ID to your Dineplan account.

  1. Log into Dineplan.
  2. Navigate to "Settings" in the left-hand menu.
  3. Go to "Booking Calendar Settings" in the right-hand menu.
  4. Enter your GTM container ID into the "Google Tag Manager Code" field. (You can find your unique container ID by logging into your GTM account.)
  5. Save your changes.

Once a person completes a booking, this event will be fired back to your GTM account.

 

Google Tag Manager Setup

To track bookings in GA4, you'll need to create a trigger for the custom event (dpWidgetCompleteNew) and a tag that fires this event to GA4.

This ensures bookings via the Dineplan widget appear in your GA4 account under "Events."

Note: Share this setup information with your SEO, Analytics, or Web team.

Create A Tag In GTM

First, you need to crate a tag in your Google Tag Manager account.

  1. Log into Google Tag Manager.
  2. Click on "Tags."
  3. Click "New Tag."
  4. Choose the tag type "Google Analytics: GA4 Event."
  5. Enter your Measurement ID from Google Analytics 4 under Admin > Data Streams.
  6. Enter the "Event Name". (The event name can be anything, for example: "dp_widget_booking".)
  7. Save your changes.
This tag will fire an event called "dineplan_widget_booking" to Google Analytics 4 when triggered.

Set Up A Trigger In GTM

The next step is to create a trigger in Google Tag Manager.

  1. Click on "Triggers."
  2. Select "New Trigger."
  3. Choose the "Custom Event" trigger type.
  4. Enter the "Event Name" as "dpWidgetCompleteNew" (This must be exact).
  5. Select "All Custom Events."
  6. Save your changes.

Test And Publish

  1. Use the preview mode to test the tag and trigger.
  2. Ensure everything is working and firing correctly.
  3. Publish the container once you're satisfied with the setup.

 

dpWidgetFrame - the event is triggered whenever the frame is loaded (whenever someone loads a page with the booking widget on it)
dpWidgetCompleteNew - the event is triggered when the event is completed, when someone has moved through all the steps of the widget. This is a confirmed booking / conversion.

**Please note: With the rollout of the new booking calendars in early September 2026, you'll need to update your GTM trigger to listen for the new event successful_booking instead of dpWidgetCompleteNew.