Tracking conversions with Google Tag Manager (GTM)

EXPERT SETTING To track the success of your online marketing campaigns for any restaurant, we’ve created essential features to track resmio’s reservation widget via Google Tag Manager (GTM).

resmio pushes specific events in the widget to the data layer.

Using triggers set in GTM, you can send the signals back to Google Analytics (GA4), for instance, and track the steps from the landing page (like the restaurant page) to the first user interaction with the widget to the reservation.

The following preparations should be made:

1. A GTM account (with pre-installed web container)
2. A GA4 account including property (with pre-installed GA4 tag on website)
3. The resmio widget (integrated as a script on the website)
4. GTM conversion tracking is enabled in the resmio account

GTM tracking is disabled by default, but you can enable this feature under Settings > Integrations > Marketing. Agencies should contact their restaurant clients directly for this.

The first step is to set up the listener tag in GTM.

This tag’s purpose is to tell Google Tag Manager to wait for certain events and send specific data (e.g., to GA4) when the preset actions occur.

Here’s how to do it:

1. Open your GTM container (workspace).
2. Then click on Tags in the page list on the left.
3. Create a new tag using the New button.
4. Select the tag type Custom HTML in the tag configuration
5. Choose a meaningful title for the tag and copy the following code.

The code should look like the screenshot above. This will keep the listener running continuously on the page and intercept all postMessage events from the widget.

All pages should be preselected as triggers.

Please don’t forget to save your custom HTML tag.

Now we need a dedicated custom event trigger for each step in our funnel.

In our setup, we need a total of 3 triggers for 3 custom GA4 tags, which we will then link to the triggers.

widget_interaction_started

Triggered upon first user interaction with the widget

reservation_step_2_started

Triggered when switching to the checkout screen (contact details entry)

reservation_completed

Triggered upon successful online reservation

Here’s how to do it:

1. Open your GTM container (workspace).
2. Then click on Triggers in the page list on the left.
3. Create a new custom event trigger using the New button
4. Select Custom Event as the trigger type
5. Assign a descriptive event title and select “All custom events” as the trigger condition.
6. Repeat steps 3 through 5 until you have a total of three triggers.

Once all triggers have been created, you can set up custom tags for GA4 (or Meta, TikTok, etc., if you prefer) and then link them to the triggers in Google Tag Manager.

Below, we outline a setup for Google Analytics 4.

Here’s how to do it:

1. Click on Tags in the side menu on the left
2. Create a new tag using the New button
3. Select the tag type Google Analytics in the tag configuration
4. Add the GA4 measurement ID from your property
5. Select a meaningful event title
6. Now link the custom tag to the appropriate trigger
7. Repeat the steps for all events

This is what your finished tracking setup for GTM and resmio could look like:

Don’t forget to push all changes to GTM for them to take effect. To complete this, click on Submit in the header bar at the top right.

(Optional step) We provide additional data with the widget events, which you can pass on to GA4, for instance.

• timestamp · Timestamp of the interaction · Example: 2025-12-05T12:23:35.430Z
• facility_id · Indicator for the respective restaurant · Example: my-restaurant-name
• promotion · Name of the selected offer time · Example: happy_hour

To use the data for your evaluations in GA4, you need…

1. … corresponding data layer variables in GTM, which you link to the GA4 events.
2. … custom definitions (custom dimensions) in GA4 that contain the event parameters

Here’s how to do it:

1. Open your GTM container (workspace).
2. Then click on Variables in the page list on the left.
3. Create a new custom variable using the New button
4. Select Data Layer Variable as the variable type
5. Now enter the following values: Variable name, e.g. DLV - facility_id, data layer variable name facility_id Save this variable.
6. Repeat the steps for the data layer variables promotion and timestamp

Once the variables have been created in Google Tag Manager, all you need to do is link them to the matching GA4 tags (as shown in the screenshot above).

In our example setup, we connect the data layer variables to all three GA4 tags.

Here’s how to do it:

1. In GTM, click on Tags
2. Edit any GA4 tag
3. Add the corresponding event parameters to the respective GA4 tag:
   1. Event parameter: facility_id has the value {{DLV - facility_id}}
   2. Event parameter: promotion has the value {{DLV - promotion}}
   3. Event parameter: timestamp has the value {{DLV - timestamp}}

Save the changes and repeat the steps for the remaining GA4 tags.

Finally, we need appropriate custom dimensions for GA4 so that Google Analytics can store, evaluate, and report them. This is because GA4 cannot track our additional widget data out of the box. We first have to teach GA4 these event parameters.

How to create custom dimensions in GA4:

1. Go to GA4 and then to Admin > Data View > Custom Definitions.
2. Then click on the button in the top-right corner Create Custom Dimension
3. Assign a meaningful dimension name and, if necessary, a description. The scope of application for our custom definition is Event / Event.
4. Now add the respective event parameter from the GA4 tag from GTM, making sure to use the correct spelling (upper and lower case letters!). Example: facility_id
5. Save your custom dimension and repeat the steps for all other data layers.

Once setup is complete, we recommend testing tracking in Google Tag Manager and GA 4.

Are the widget signals being properly sent from GTM to GA4?

If so, you can now use this data to set up a funnel using exploratory data analysis, for instance, and track the various steps in user interaction from page view to completed reservation.

Here’s how:

1. Open the relevant GA4 property
2. In the sidebar on the left, click Exploratory Data Analysisand then Exploratory Funnel Analysis
3. Edit the steps you have created in Settings > Steps: Add all events one after the other (page_view, widget_interaction_started, reservation_step_2_started_reservation_completed).
4. You can use dimensions to segment the funnel by device category, traffic sources, etc.