Triggerbee Onsite Campaigns emits JavaScript events whenever a visitor interacts with a campaign (for example, when a campaign is opened, closed, clicked, or a form is submitted). These events can be used to log campaign activity to Google Analytics 4 (GA4) for reporting and follow-up.

There are two ways to do this:

Recommended: Send Triggerbee events to the Google Tag Manager (GTM) data layer, then trigger GA4 events in GTM
Advanced: Send Triggerbee events directly to GA4 via code (requires your own GA implementation)

We recommend method 1 (GTM) since it’s easier to manage, validate, and maintain over time.

What you can track

Triggerbee provides multiple campaign interaction events, such as:

campaign opened (viewed)
campaign closed
button clicked
form submitted (before/after)
campaign state switched (e.g. primary → success state)

Each event includes campaign data you can use in GA4, for example:

campaign name
campaign ID
variant ID
URL (for click events)
state ID

Method 1: Log Triggerbee Events to GA4 via GTM

This method pushes Triggerbee events into window.dataLayer. From there, you can create GTM triggers and send events to GA4 using GA4 Event tags.

This setup is recommended because:

it works well across different GA installations
it’s easy to test in GTM Preview mode
the same events can also be reused for other tracking tools

Step 1 - Push Triggerbee events to the GTM data layer

Open Google Tag Manager
Go to Tags → New
Select Tag type: Custom HTML
Paste the script below
Set the trigger to:
- Page View (for standard websites), or
- Window Loaded / Initialization (for SPA sites)
Save the tag and publish your GTM container.

Important: Make sure this tag runs after the Triggerbee tracking code has been initialized.

GTM Custom HTML tag (dataLayer push)

<script>
  window.dataLayer = window.dataLayer || [];

  // Triggers when a visitor sees a campaign
  document.addEventListener("onTriggerbeeWidgetOpened", function (event) {
    window.dataLayer.push({
      event: "onTriggerbeeWidgetOpened",
      campaignName: event.detail.campaignName,
      campaignId: event.detail.campaignId,
      variantId: event.detail.id
    });
  });

  // Triggers when a visitor closes a campaign
  document.addEventListener("onTriggerbeeWidgetClosed", function (event) {
    window.dataLayer.push({
      event: "onTriggerbeeWidgetClosed",
      campaignName: event.detail.campaignName,
      campaignId: event.detail.campaignId,
      variantId: event.detail.id
    });
  });

  // Triggers when a visitor submits a form in a campaign (before submit is completed)
  document.addEventListener("onBeforeTriggerbeeFormSubmitted", function (event) {
    window.dataLayer.push({
      event: "onBeforeTriggerbeeFormSubmitted",
      campaignName: event.detail.campaignName,
      campaignId: event.detail.campaignId,
      variantId: event.detail.id
    });
  });

  // Triggers when a visitor submits a form in a campaign (after successful submit)
  document.addEventListener("onAfterTriggerbeeFormSubmitted", function (event) {
    window.dataLayer.push({
      event: "onAfterTriggerbeeFormSubmitted",
      campaignName: event.detail.campaignName,
      campaignId: event.detail.campaignId,
      variantId: event.detail.id
    });
  });

  // Triggers when a visitor clicks a button in a campaign (not close buttons)
  document.addEventListener("onTriggerbeeWidgetButtonClicked", function (event) {
    window.dataLayer.push({
      event: "onTriggerbeeWidgetButtonClicked",
      campaignName: event.detail.campaignName,
      campaignId: event.detail.campaignId,
      variantId: event.detail.id,
      url: event.detail.url
    });
  });

  // Triggers when the campaign switches state (e.g. primary → success)
  document.addEventListener("onTriggerbeeWidgetStateSwitched", function (event) {
    window.dataLayer.push({
      event: "onTriggerbeeWidgetStateSwitched",
      campaignName: event.detail.campaignName,
      campaignId: event.detail.campaignId,
      variantId: event.detail.id,
      stateId: event.detail.stateId
    });
  });
</script>

After publishing, these events will appear in GTM Preview mode and in the data layer whenever campaign activity occurs.

Step 2 - Create custom triggers in GTM

For each Triggerbee event you want to use, create a trigger:

Go to Triggers → New
Select Trigger configuration → Custom Event
Enter the event name (must match exactly), for example:
- onTriggerbeeWidgetButtonClicked
- onAfterTriggerbeeFormSubmitted
Save

You will need one trigger per Triggerbee event you want to track.

Step 3 - Create Data Layer Variables in GTM

Now that Triggerbee events are being pushed into the data layer, you should create Data Layer Variables in GTM so you can reuse the campaign data in your GA4 event tags.

Create the variables

Go to Variables → New
Select Variable type: Data Layer Variable
Enter the Data Layer Variable Name (must match the key from the dataLayer push)

Here's a list of all Triggerbee variables, but you only need to create the ones you need. We recommend at least creating the campaignName, campaignId and variantId

Variable name in GTM	Data Layer Variable Name
`DLV - campaignName`	`campaignName`
`DLV - campaignId`	`campaignId`
`DLV - variantId`	`variantId`
`DLV - url` (optional)	`url`
`DLV - stateId` (optional)	`stateId`

Step 4 - Send the events to GA4

Now create GA4 tags using your new triggers:

Go to Tags → New
Select Tag type: Google Analytics: GA4 Event
Add your GA4 Measurement ID
Set an event name
Add event parameters
Use your Triggerbee trigger as the tag trigger

Now you're done! Publish your new tags and variables and you will start seeing Triggerbee events in Google Analytics!

Method 2 (Advanced):
Send Triggerbee Events Directly to GA4 via Code

If you prefer not to use GTM, you can still forward Triggerbee campaign events to GA4 directly from your site code.

✅ Triggerbee supports: campaign event listeners such as onTriggerbeeWidgetClicked and onAfterTriggerbeeFormSubmitted, including campaign data in event.detail.

⚠️ You provide: the GA4 “send event” implementation. GA4 can be installed in different ways (gtag, GTM, consent mode, wrappers, etc.), so we do not provide a universal copy/paste GA4 script.

Step 1 - Create GA4 events and custom definitions

Create events in GA4 for each Triggerbee event you want to use.

Go to Admin → Property → Events → Create event
Enter the event name, for example:
- tb_campaign_view
- tb_campaign_click
- tb_campaign_form_submission
Save

You will need one event per Triggerbee event you want to track.

You will also need Custom dimensions to track what campaign has been interacted with.

Go to Admin → Data display → Custom definitions → Create custom dimension
Add custom dimensions, for example:
- campaign_name
- campaign_id
- variant_id
Save

Step 2 - Add your event forwarding script

Use the template below and connect it to your GA4 setup.

// Ensure GA4 is initialized on the page using your setup.
// (Triggerbee does not initialize GA4 for you.)

document.addEventListener("onTriggerbeeWidgetClicked", function (event) {
  const campaignName = event.detail.campaignName;

  // Send to GA4 using your implementation
  // Example (if gtag is available):
  // window.gtag?.("event", "tb_campaign_click", { campaign_name: campaignName });
});

document.addEventListener("onAfterTriggerbeeFormSubmitted", function (event) {
  const campaignName = event.detail.campaignName;

  // Send to GA4 using your implementation
  // Example (if gtag is available):
  // window.gtag?.("event", "tb_campaign_form_submission", { campaign_name: campaignName });
});

Alternative option: Track campaign clicks directly from a campaign

Sometimes, it is also useful to track specific button clicks. The general campaign tracking will automatically grab the campaign name for any clicks happening, but if you have multiple buttons, they will get the same naming. In those cases, you could also add tracking to the specific buttons.

To do so, navigate to the button in your campaign and go to Actions. Enter this example script and adjust according to your setup:

//Example code. Must be adjusted to fit you gtag implementation

window.gtag?.("event", "tb_campaign_click", { 
   campaign_name: 'Summer Sale Button 2',
   campaign_id: 12345
});