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:
- In GTM, create a Custom Event trigger named
new_transaction. - Create or update your GA4 event tag.
- Use the
new_transactiontrigger for that tag. - Map transaction values from the
transactionobject where they are available, such as transaction ID, amount, and currency. - 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.
- Open Google Tag Manager and click Preview.
- Enter the URL of your VaocherApp checkout form.
- Move through the checkout form as a customer would.
- Select a voucher, switch the send option if needed, and continue through the checkout steps.
- In the GTM preview panel, check that the expected events appear in the
dataLayer. - 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_stepstep.name: machine-readable step identifierstep.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_switchmode:other(sending to someone else) orself(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_selectitem.id: the selected item’s hashed IDitem.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_transactiontransaction: the full transaction response object returned by the server, which typically includes:transaction_idamountcurrencytest_modegift_vouchersorder_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.








