VaocherApp

How can we help?

Track Checkout Actions with Google Tag Manager (GTM)

After you add your Google Tag Manager (GTM) container to VaocherApp, the checkout form can send useful checkout actions to GTM as customers move through the purchase flow.

You can use these events to build GA4 events, Google Ads conversions, Meta purchase tags, funnel reports, and other marketing or analytics tags from your own GTM container.

What this helps you track

With the GTM checkout events, you can track:

  • How many customers reach each checkout step
  • Where customers drop off before completing payment
  • Which vouchers or menu items customers select
  • Whether customers are buying for themselves or sending a gift to someone else
  • When a purchase is completed successfully
  • Purchase details that can be passed into your analytics or advertising tools

VaocherApp sends the checkout events to the GTM dataLayer. You choose which GTM triggers and tags to create from those events.

Before you start

Make sure Google Tag Manager is already connected to your VaocherApp checkout form.

If you have not added your GTM container yet, follow the Google Tag Manager integration guide first. You will need to save your GTM container ID in VaocherApp before these checkout events can be used.

Once the container is saved, open your checkout form and use GTM Preview Mode to confirm the events are appearing as customers interact with the form.

Events sent from the checkout form

Event When it fires What you can use it for
next_step A customer enters a checkout step. This also fires once when the checkout form first loads. Checkout funnel tracking, step drop-off reports, abandoned checkout analysis
item_select A customer selects a voucher or menu item to purchase. Popular voucher reporting, product interest audiences, campaign performance analysis
send_mode_switch A customer switches between sending the voucher to themselves or to someone else. Gift purchase vs self-purchase reporting, audience segmentation
new_transaction A payment completes successfully and the server confirms the order. Purchase conversions, revenue attribution, advertising conversion tags

Recommended tracking recipes

Track checkout step views

Create a GTM Custom Event trigger with this event name:

next_step

Use this when you want to see how many customers reach each checkout step, such as selecting a voucher, entering details, making payment, or completing the order.

For more detailed reporting, use the step.name or step.displayName value in your analytics tag so each checkout step can be reported separately.

Track selected vouchers

Create a GTM Custom Event trigger with this event name:

item_select

Use this when you want to understand which vouchers or menu items customers are interested in before they complete payment.

The event includes the selected item’s hashed ID and name, so your analytics reporting can show which offers are attracting attention.

Track gift vs self-purchase intent

Create a GTM Custom Event trigger with this event name:

send_mode_switch

Use this when you want to understand whether customers are buying for themselves or sending the voucher to someone else.

The event includes a mode value of self or other.

Track successful purchases

Create a GTM Custom Event trigger with this event name:

new_transaction

Use this event for purchase conversions. It fires only after payment has completed successfully and the order has been confirmed by the server.

This is the best checkout event to use for Google Ads conversion tags, Meta purchase events, GA4 purchase events, or revenue reporting.

Example: track purchases in GA4

To send successful VaocherApp purchases into GA4 through GTM:

  1. In GTM, create a Custom Event trigger named new_transaction.
  2. Create or update your GA4 event tag.
  3. Use the new_transaction trigger for that tag.
  4. Map transaction values from the transaction object where they are available, such as transaction ID, amount, and currency.
  5. Test the checkout in GTM Preview Mode before publishing your container.

VaocherApp sends the purchase event to GTM, but it does not automatically create your GA4 events, Google Ads conversions, or other advertising tags. Those tags are managed in your GTM container.

Testing your setup

Before publishing your GTM changes, test them with GTM Preview Mode.

  1. Open Google Tag Manager and click Preview.
  2. Enter the URL of your VaocherApp checkout form.
  3. Move through the checkout form as a customer would.
  4. Select a voucher, switch the send option if needed, and continue through the checkout steps.
  5. In the GTM preview panel, check that the expected events appear in the dataLayer.
  6. Confirm your GTM tags fire on the right events.

For purchase tracking, use a safe test payment flow if your account and payment gateway support it. Avoid testing live advertising conversion tags with real customer purchases unless you are ready to publish that setup.

Event reference

The reference below shows the exact checkout events and fields sent to GTM.

next_step

Fires when the customer moves between checkout steps. Also fires once on initial page load to record the starting step.

Payload:

  • event: next_step
  • step.name: machine-readable step identifier
  • step.displayName: human-readable step label

Possible step values:

step.name step.displayName
item Select item
details Enter details
payment Make payment
complete Complete

Use cases: Funnel analysis, drop-off rate per step, time-to-complete metrics.

send_mode_switch

Fires when the customer toggles between sending the voucher to themselves or to someone else.

Payload:

  • event: send_mode_switch
  • mode: other (sending to someone else) or self (sending to themselves)

Use cases: Understand purchase intent (gift vs self-purchase), segment audiences.

item_select

Fires when the customer selects a voucher / menu item to purchase on step 1.

Payload:

  • event: item_select
  • item.id: the selected item’s hashed ID
  • item.name: the selected item’s name

Use cases: Track which products attract the most interest, popular item reporting.

new_transaction

Fires when a payment completes successfully and the server confirms the order.

Payload:

  • event: new_transaction
  • transaction: the full transaction response object returned by the server, which typically includes:
    • transaction_id
    • amount
    • currency
    • test_mode
    • gift_vouchers
    • order_download_url
    • (additional fields may also be present depending on the payment gateway)

Use cases: Conversion tracking, revenue attribution, Google Ads / Meta purchase events, ROAS reporting.

Privacy note

If doNotTrack=1 is added to the checkout URL, Google Tag Manager is not loaded on that checkout form. When GTM is not loaded, none of these checkout events are sent to GTM.