How to track checkout events in Google Tag Manager

Connecting your Google Tag Manager (GTM) container in VaocherApp is the first step, but it does not automatically create tracking tags in your GTM account. If you have not connected GTM yet, start with our Google Tag Manager integration guide first.

VaocherApp sends custom checkout events to your GTM container. You (or your marketing agency) need to create triggers and tags in your own GTM workspace to listen for those events and forward them to Google Analytics 4 (GA4), Meta Pixel, or other tools.

If your GTM is connected but you see no checkout activity in GA4 Real-time or GTM Preview, this guide will help you set things up correctly.

---

Before you start

Make sure you have:

1. Connected GTM in VaocherApp: follow our Google Tag Manager integration guide to enter your GTM container ID (e.g. GTM-XXXXXXX) under Settings → Integrations → Google Tag Manager.
2. Access to your GTM workspace: you need permission to create triggers and tags.
3. A GA4 property: if you want events to appear in Google Analytics (most common setup).

Embedded checkout forms: If your checkout is embedded on your website (e.g. inside an iframe), your GTM container still loads, but it runs on checkout.vaocher.app, not on your main website domain.

---

Events VaocherApp sends

VaocherApp does not send standard GA4 ecommerce events like purchase or add_to_cart automatically. Instead, it pushes these custom events to the dataLayer:

next_step

Fired when the customer moves to a new step in the checkout, and once when the form first loads.

item_select

Fired when the customer selects a voucher or menu item.

send_mode_switch

Fired when the customer switches between buying for someone else vs buying for themselves.

new_transaction

Fired when an online payment completes successfully. This is your conversion/purchase event.

Note: new_transaction is not fired for offline/manual payment methods — only for successful online card payments.

---

Step 1: Create triggers in GTM

In your GTM container, go to Triggers → New and create one trigger per event you want to track.

Example: Purchase trigger

1. Trigger type: Custom Event
2. Event name: new_transaction
3. Name the trigger: CE - VaocherApp - new_transaction
4. Save

Repeat for other events as needed:

Important: Do not restrict by hostname

If your triggers or tags include a condition like Page Hostname equals yourwebsite.com, they will not fire inside the checkout form. The checkout runs on checkout.vaocher.app.

Either:

• Remove hostname restrictions from checkout-related triggers/tags, or
• Add checkout.vaocher.app as an allowed hostname.

---

Step 2: Create GA4 event tags

For each trigger, create a tag to send the event to GA4.

Example: Track purchases (new_transaction)

1. Go to Tags → New

2. Tag type: Google Analytics: GA4 Event

3. Configuration Tag: select your existing GA4 Configuration tag

4. Event Name: purchase (or keep as new_transaction if you prefer)

5. Event Parameters (optional but recommended):

   Parameter name	Value
   transaction_id	{{dlv - transaction.transaction_id}}
   value	{{dlv - transaction.amount}}
   currency	{{dlv - transaction.currency}}

   To use these, first create Data Layer Variables in GTM:

   • Variable type: Data Layer Variable
   • Data Layer Variable Name: transaction.transaction_id (repeat for transaction.amount, transaction.currency)

6. Triggering: select CE - VaocherApp - new_transaction

7. Name the tag: GA4 Event - VaocherApp Purchase

8. Save

Example: Track checkout steps (next_step)

1. Tag type: Google Analytics: GA4 Event

2. Event Name: checkout_step

3. Event Parameters:

   Parameter name	Data Layer Variable
   step_name	step.name
   step_display_name	step.displayName

4. Triggering: CE - VaocherApp - next_step

5. Save

Example: Track item selection (item_select)

1. Tag type: Google Analytics: GA4 Event
2. Event Name: select_item
3. Event Parameters: item_id → item.id, item_name → item.name
4. Triggering: CE - VaocherApp - item_select
5. Save

---

Step 3: Publish your GTM container

After creating triggers and tags:

1. Click Submit in GTM
2. Add a version name (e.g. “VaocherApp checkout events”)
3. Publish

Changes do not take effect until the container is published.

---

Testing your setup

Option A: GTM Preview on the checkout URL (recommended)

1. In GTM, click Preview
2. Enter your checkout form URL directly. You can find this in VaocherApp under your checkout form settings, or by right-clicking your embedded form → inspecting the iframe src attribute. It will look like: https://checkout.vaocher.app/?id=your-checkout-id...
3. Walk through the checkout (select item, enter details, etc.)
4. In Tag Assistant, confirm:
   • Tags fire on next_step, item_select, etc.
   • Your purchase tag fires on new_transaction after a test payment

Option B: Check the dataLayer in browser DevTools

1. Open your website with the embedded checkout (or the checkout URL directly)
2. Open DevTools → select the checkout iframe context (not the top page)
3. In the Console, type dataLayer and press Enter
4. Interact with the checkout — you should see objects with "event": "next_step", "event": "item_select", etc.

If dataLayer shows these events but your GTM tags do not fire, the issue is in your GTM trigger/tag configuration (Step 1–2 above).

If dataLayer is empty or missing events, contact VaocherApp support — include your account name and checkout form URL.

---

Quick reference