How can we help?

PocketSuite's booking and lead form widgets let clients complete bookings and submit leads directly on your website. By connecting Google Tag Manager (GTM), you can track when a client finishes that process as a conversion — so you can see which ads, pages, or links are actually driving results for your business.

This guide uses the recommended setup method, which works whether you've embedded the PocketSuite widget on your own website or are sending clients directly to your hosted PocketSuite booking page.

Note this guide discusses the most common widgets, Booking and Lead. But similar configurations can be used for other widget types. 

Before you start

Before setting up conversion tracking, you'll need the following in place:

• A Google Tag Manager account — if you don't have one, create a free GTM account.
• GTM installed on your website — the GTM code snippet must be added to your website's HTML. See Google's installation guide if you haven't completed this step.
• Your GTM container ID — formatted as GTM-XXXXXXX. You can find this in the top right corner of your GTM dashboard after logging in.
• Access to the PocketSuite app — to connect your GTM container to your widget in the next step.

Step 1: Connect GTM to your PocketSuite widget

Adding GTM to your website is not enough on its own. GTM also needs to be connected inside PocketSuite so it can monitor activity within the booking widget.

1. Open the PocketSuite app and go to Settings > Marketing Analytics.
2. Paste your GTM container ID into the Google Tag Manager field.
3. Tap Save.

Note: The same screen also has a separate field for your Google Analytics Measurement ID if you use GA4. The two fields are independent — you can add one, both, or neither.

Step 2: Create a variable to detect the confirmation screen

In GTM, a variable is a piece of information GTM reads from your page. In this step, you'll create a variable that reads the text shown in the page title of the PocketSuite widget. You'll use this variable in the next step to make sure your conversion only fires when the booking is actually complete — not earlier in the flow.

1. Log in to Google Tag Manager and select your container.
2. In the left menu, click Variables.
3. Under "User-Defined Variables", click New.
4. Click the name field at the top and enter: PocketSuite – Confirmation Text
5. Click Variable Configuration and select DOM Element.
6. Under Selection Method, choose CSS Selector.
7. In the Element Selector field, enter: div.page-title
8. Leave the Attribute Name field blank. This tells GTM to read the text displayed inside the element.
9. Click Save.

Step 3: Create conversion triggers

A trigger tells GTM when to act. In this step, you'll create two triggers — one for the booking widget and one for the lead form widget — that each fire the moment a client reaches the "You're all set!" confirmation screen.

Why this approach works

When a client completes a booking using the embedded PocketSuite widget, your website's URL doesn't change. This means a standard URL-based trigger can't detect that the booking is complete. Instead, GTM watches for the confirmation screen to appear.

PocketSuite's booking and lead form widgets use different wrapper elements on their confirmation screens:

• The booking widget confirmation screen uses the wrapper id="complete"
• The lead form widget confirmation screen uses the wrapper id="lead"

This lets you target each widget precisely using a CSS selector that combines the wrapper ID with the page title:

To create each trigger, follow these steps twice — once for each row in the table above:

1. In GTM, click Triggers in the left menu, then click New.
2. Click the name field at the top and enter the trigger name from the table above.
3. Click Trigger Configuration and select Element Visibility.
4. Under Selection Method, choose CSS Selector.
5. In the selector field, enter the CSS selector for that widget from the table above — #complete div.page-title for the booking widget, or #lead div.page-title for the lead form widget.
6. Under When to fire this trigger, click Add Condition.
7. In the condition row, set the three fields to: PocketSuite – Confirmation Text → contains → You're all set!
8. Click Save. Repeat for the second trigger.

Note: When entering You're all set! in step 7, copy the text from the code block below — do not type it manually. The apostrophe in "You're" is a typographic character (Unicode U+2019) rather than a standard keyboard apostrophe. If you type a keyboard apostrophe, GTM will not find a match and the trigger will never fire.

You’re all set!

Note: The CSS selector and text condition are both required. The div.page-title element appears on multiple screens within the widget flow — not just the confirmation screen. Without the text condition, your trigger could fire before the booking is actually complete. The #complete and #lead wrapper IDs ensure each trigger fires only for its own widget, so if you embed both on the same page, they will not interfere with each other.

Step 4: Create conversion tags and attach the triggers

A tag tells GTM what to do when a trigger fires. You'll create one tag per trigger — two total. The steps are the same for each; the table below shows the names to use for each widget.

Follow Option A, Option B, or both depending on which platforms you use, and repeat for the second trigger.

Option A: Google Ads conversion tag

Use this option if you run paid ads through Google Ads and want to track completed bookings and lead form submissions as conversions.

1. In GTM, click Tags in the left menu, then click New.
2. Name your tag using the Google Ads tag name for that widget from the table above.
3. Click Tag Configuration and select Google Ads Conversion Tracking.
4. You'll need your Conversion ID and Conversion Label from your Google Ads account. To find these, go to Google Ads and navigate to Goals > Conversions > Summary. Click the conversion action you want to track, then select Tag setup > Use Google Tag Manager. Google Ads will display your Conversion ID and Label.
5. Enter those values into the corresponding fields in GTM.
6. Under Triggering, click the "+" icon and select the trigger for that widget (PocketSuite – Booking Complete or PocketSuite – Lead Form Complete).
7. Click Save.

For a full walkthrough, see Google's guide to Google Ads conversion tracking.

Option B: Google Analytics 4 (GA4) event tag

Use this option if you use Google Analytics to understand how clients find and interact with your booking page.

1. In GTM, click Tags in the left menu, then click New.
2. Name your tag using the GA4 tag name for that widget from the table above.
3. Click Tag Configuration and select Google Analytics: GA4 Event.
4. In the Measurement ID field, enter your GA4 Measurement ID (formatted as G-XXXXXXXXXX). You can find this in Google Analytics under Admin > Data Streams — click your web data stream and the Measurement ID appears at the top.
5. In the Event Name field, enter the GA4 event name for that widget from the table above (booking_complete or lead_complete).
6. Under Triggering, click the "+" icon and select the trigger for that widget (PocketSuite – Booking Complete or PocketSuite – Lead Form Complete).
7. Click Save.

For a full walkthrough, see Google's guide to GA4 events with Tag Manager.

Not sure which option to use? If you run Google Ads campaigns, set up Option A. If you primarily use Google Analytics to understand your audience and website activity, set up Option B. You can use both — just create the tags for each platform.

Step 5: Test your setup before publishing

Before your tracking goes live, use GTM's Preview mode to confirm everything fires correctly.

1. In GTM, click Preview in the top right corner. A new browser tab will open with GTM's debug panel running.
2. Navigate to your PocketSuite booking widget and complete a test booking all the way through to the "You're all set!" confirmation screen.
3. Look at the GTM debug panel. Your trigger should appear under Tags Fired only after the confirmation screen loads — not before.
4. If the trigger appears earlier in the booking flow, return to Step 3 and confirm both conditions are configured: the correct CSS selector and text contains You're all set! (not equals).

Once confirmed, return to GTM and click Submit to publish your container.

Important: Your conversion tracking will not be active until you publish the container. Saving individual tags and triggers does not make them live.

For a full walkthrough of GTM's testing tools, see Google's guide to previewing and debugging containers.

Additional option: URL-based tracking for standalone booking pages

If you send clients directly to your PocketSuite-hosted booking page — rather than embedding the widget on your own website — there is an alternative tracking method. When a client completes a booking on a standalone PocketSuite page, the URL updates to include /complete. GTM can detect this URL change using a standard Page View trigger.

The two confirmation page URL patterns are:

• /book/username/complete — booking widget
• /lead/username/complete — lead form widget

To find your specific URL, complete a test booking on your PocketSuite page and copy the URL from the confirmation screen.

To set up a URL-based Page View trigger in GTM:

1. In GTM, click Triggers, then click New.
2. Name the trigger: PocketSuite – Booking Complete (URL)
3. Click Trigger Configuration and select Page View.
4. Under This trigger fires on, choose Some Page Views.
5. Set the condition to: Page URL → contains → your /complete URL path (for example, /book/yourusername/complete).
6. Click Save, then attach it to a tag following the same steps in Step 4.

Important: This method only works for standalone PocketSuite-hosted booking pages. If you use the embedded widget or iframe on your own website, the page URL does not change when a booking is completed, and this trigger will not fire. The Element Visibility method in the main guide above works for both scenarios — so if you ever switch from a standalone page to an embedded widget, you won't need to redo your tracking setup.

Troubleshooting

My trigger isn't firing in GTM Preview.

• Confirm your GTM container ID is saved in Settings > Marketing Analytics in PocketSuite.
• Make sure you completed the booking all the way through to the "You're all set!" screen during your test.
• Confirm both trigger conditions are set correctly: the CSS selector and contains You're all set! (not equals). Also confirm the You're all set! value was copied from the code block in Step 3 — not typed manually. The apostrophe must be the typographic character (U+2019), not a standard keyboard apostrophe.
• Confirm the variable from Step 2 (PocketSuite – Confirmation Text) is saved and configured correctly.

My tag is firing in Preview but conversions aren't showing in Google Ads or GA4.

• Confirm you clicked Submit in GTM to publish the container after testing.
• Allow a few hours for conversion data to appear — there is typically a processing delay.
• In Google Ads, check that your conversion action status shows as "Active."

Do I need GTM on my website AND in PocketSuite?

If you're using the embedded widget on your own website: yes. GTM on your website tracks general site activity, while the GTM ID saved in Settings > Marketing Analytics in PocketSuite tracks activity inside the widget. Both are needed for complete tracking.

If you're directing clients to a standalone PocketSuite booking page: you only need to add GTM in Settings > Marketing Analytics.

Related resources

• Google Tag Manager Help Center
• Create a Google Tag Manager account
• Preview and debug your GTM container
• Google Ads conversion tracking
• GA4 events with Google Tag Manager

If you have questions, reach out to our support team at support@pocketsuite.io.