How to Track Conversions with Google Tag Manager

Where can I find it? Company >>> Components/Integrations >>> Google Tag Manager      

Google Tag Manager is a tag management system that allows you to manage, deploy, and administer marketing tags (code snippets or tracking pixels) without touching your website's code every time. 

With this integration, you can track your purchase conversions in Google Analytics 4 (GA4) and Google Ads, whether you use TuriTop's default thank-you page or your own custom thank-you page.

Using the TuriTop Plugin for WooCommerce? The WordPress/WooCommerce setup is explained in this article (under construction).

If you have further questions after reviewing this article, contact our support team so we can advise you based on your TuriTop account's configuration.

How this integration works

The booking widget is embedded as an <iframe> on your website, but the purchase ends on TuriTop's domain. This integration allows the conversion to be measured on your own domain, within the same session that brought in the campaign.

In broad terms:

1. The widget reads the attribution data from your page (the parent page): gclid, gbraid, wbraid, gad_source, utm_* parameters, and the _ga / _gcl_aw cookies, and carries them through the purchase flow. This data travels live and is never stored in our database.
2. The widget emits a standardized funnel of events to your page: widget_loaded (fires when the widget loads), add_to_cart (fires when the ticket_type_count changes), checkout_started (fires when reaching the form and payment step), purchase (fires when the purchase is confirmed), and payment_error (fires when the payment fails/is declined).
3. When the purchase is confirmed, the conversion fires on your domain through one of two automatic paths:
   • If you use TuriTop's default thank-you page: sent via postMessage to the page embedding the widget (no redirect).
   • If you use a custom thank-you page: top-level redirect to your thank-you page with the parameters in the URL.

In both cases, conversions are deduplicated by transaction_id = booking_id, so the same sale is never counted twice.

What you can measure

• Purchases (purchase): attributed to your Google Ads and GA4 campaigns, with their value and currency.
• Breakdown by company (company_short_id), product (product_short_id), and origin domain (site_url): useful if you manage multiple companies or sites.
• Payment methods: stripe, paypal, sis, promo, etc.
• Earlier funnel events (widget_loaded, add_to_cart, checkout_started): to optimize your campaigns.
• Session tracking: attribution via gclid / gbraid / wbraid / gad_source, utm_*, and _ga / _gcl_aw cookies.

Payments through the classic Redsys gateway navigate at the top level, so the return from the bank lands on your success page (or the page embedding the widget) and the conversion fires there, just like with PayPal. No extra configuration is required.

Payloads

Fields/payload of the purchase event:

For purchases without an online gateway (discounts, free, etc.), they are recorded with payment_method = promo and the total can be 0. A deferred payment (payment link) does not emit purchase until there is an actual payment.

Fields/payload of the widget_loaded event:

Fields/payload of the add_to_cart event:

Fields/payload of the checkout_started event:

Fields/payload of the payment_error event:

How are TuriTop payment gateways registered?

Prerequisites

• Have GA4 installed on your domain and Google Ads auto-tagging active, so that the _ga / _gcl_aw cookies and the gclid reach your page.
• Have a Google Tag Manager account and container.

Instructions

Follow these steps to connect your TuriTop panel with GTM:

Step 1: Access your Google Tag Manager account

Go to the Google Tag Manager site (https://tagmanager.google.com/) and log in with your associated Google account or create a new account (tutorial).

Once inside, access the Workspace and copy the ID that you will see at the top right of the page. It will be similar to: GTM-XXXXX.

Step 2: Connect your Google Tag Manager to your TuriTop account

Open the control panel of your TuriTop Reservation System and go to Company >>> Components/Integrations >>> Google Tag Manager.

Paste your Google Tag Manager ID.

Step 3: Install the GTM tag on your website

To learn how to install the GTM container on your website, you can follow this tutorial. While you can insert the code snippets manually, many tools on the market can help you, depending on which CMS you use.

Make sure you don't duplicate the code if your CMS already inserts it by another means.

Step 4: Import the TuriTop container or build your own configuration

Your marketing team can configure the GTM tags and triggers if they wish, but we offer a predefined container that you can easily import into your panel.

If you want to use our container or use it as a template, see the next section.

If you prefer to set it up from scratch, create your own tags using the purchase event trigger and the payload fields as a base (you can map booking_id → transaction_id, total → value, etc.). For developers who prefer their own code instead of GTM, you can also listen directly to the purchase event via window.addEventListener("message", …), always filtering by e.data.origin === "turitop".

Paso 5: Test in Google Tag Manager

Google suggests checking that the configured tags are working properly before publishing any changes. To test, click on the "Preview" option.

You will have to enter the URL to your website and, once it loads, click on "Connect" and simulate the behavior of an end-user on the web to check that the configured events are correctly registered by GTM.

Make sure you have already installed the Google Tag Manager tag on your website. 

Import the TuriTop container

We offer a preconfigured container that includes everything needed to record the events mentioned above. To download it, click here.

Step 1: Importa el contenedor

Go to your Google Tag Manager panel and click on "Admin":

In the container's options menu, select the "Import Container" option.

In the new window that opens, you'll need to:

1. Select the "turitop-container.json" file you downloaded earlier. 
2. Decide which workspace you'll install it in. 
3. Choose whether or not to overwrite the existing configuration.

To finish importing it, click "Add to Workspace".

Step 2: Edit the IDs

After importing the container, you'll see the following triggers and tags in your panel:

You only need to edit three constant variables with your own identifiers:

• Const - GA4 Measurement ID: replace G-XXXXXXXXXX with your GA4 Measurement ID.
• Google Ads Conversion ID: replace AW-XXXXXXXXXX with the numeric ID of your conversion action.
• Google Ads Conversion Label: replace the placeholder value with your conversion label.

Go to "Variables", select "Const - GA4 Measurement ID", click the pencil to edit it, add your Google Analytics 4 ID, and click "Save" to record the changes. Then repeat the step for "Const - Google Ads Conversion ID" and "Const - Google Ads Conversion Label".

How to get your GA4 ID? If you are not sure where to locate your ID, follow this tutorial.

Step 3: Publish the changes

Once you've finished making all the necessary changes in the container, remember to click "Submit" so they go into production.