Google Tag Manager and Google Analytics

By default Bilberry Widgets will register analytics events by simply pushing to window.dataLayer. These events can be picked up by utilizing Google Tag Manager (GTM) on your website, which will forward events to Google Analytics.

We also support registering analytics events directly against Google Tag (GTAG), instead of through the default dataLayer/GTM.
Add the following line to your widgets configuration if you want to use GTAG: window.BilberryWidgetsGlobal.useGtag = true;

Analytics events are structured in a GA4/ecommerce compatible format, and will be automatically displayed correctly in Google Analytics.
See this link for details: https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm

In order for either the GTAG or GTM approach to work, make sure you’ve also added the appropriate (GTAG/GTM) code-snippet-setup to your website.

The easiest way (recommended) for you to get started is to simply use GTAG instead of the default GTM/dataLayer, by adding the config-option specified above. You don’t need to do anything else, events will be correctly registered and visible in your Google Analytics dashboard.

If you’ve decided to use the GTM approach, continue reading the next section (Configuring Google Tag Manager) for details on how to set up your GTM configuration.

Configuring Google Tag Manager

This section contains instructions on how to set up your GTM configuration.
Don’t follow this section if you’ve chosen the GTAG approach, as these steps are not required.

For compatibility/legacy reasons event-names are by default dispatched in the old Universal Analytics (UA) style, instead of the new Google Analytics 4 (GA4) style. In most cases you don’t want the default behavior (UA), and instead want the new GA4 style.
(GTAG already uses GA4-style by default, so this only applies when using GTM)

Add the following line to your widgets configuration to use the new GA4 style event-names:
window.BilberryWidgetsGlobal.useGtmGa4 = true;

In short, all you need to get started is to create two tags and a single trigger, as specified below.

Creating TRIGGER: Custom Event

Select the Triggers section inside your Tag Manager account/dashboard.
Click New to create a new trigger.
Set Trigger Name = Events
Set Trigger Type = Custom Event
Set Event name = *
Set This trigger fires on = All Custom Events
Click Save.

Creating TAG (1): Google tag

Select the Tags section inside your Tag Manager account/dashboard.
Click New to create a new tag.
Set Tag Name = Google Tag
Set Tag Type= Google Tag
Set Tag ID to the Measurement-ID/Tag-ID found in your Google Analytics account.
Make sure Triggers for this tag has a single trigger Initialization - All Pages.
Click Save.

Creating TAG (2): Google Analytics: GA4 Event

Select the Tags section inside your Tag Manager account/dashboard.
Click New to create a new tag.
Set Tag Name = Google Analytics
Set Tag Type= Google Analytics: GA4 Event
Set Measurement ID to the Measurement-ID/Tag-ID found in your Google Analytics account.
Set Event Name= {{Event}}
Select/check-on the More Settings > Ecommerce > Send Ecommerce data option, and make sure Data source is set to Data Layer.
Add a single Trigger for this tag, choose the trigger you created in the previous step.
Click Save.

That’s it! Events should begin to appear in your Google Analytics account.
Since events are structured in a GA4/ecommerce compatible format, the data will automatically be displayed correctly in your analytics reports.

Enhanced Conversions for Google Ads (Performance Max)

Bilberry Widgets can optionally push the customer’s contact details to window.dataLayer immediately before the purchase event, so that a Google Tag Manager Google Ads: Enhanced Conversions tag can pick them up. This is primarily intended to improve conversion tracking accuracy for Performance Max campaigns.

The data is pushed in plain text — Google handles hashing on its side once the GTM tag forwards the event.

Privacy / consent: Bilberry Widgets does not gate this push. You are responsible for configuring your existing consent solution (e.g. Cookiebot together with Google Consent Mode v2) so that the GTM tag only fires when the user has granted the appropriate consent. The widget always pushes the data when the flag is enabled and a customer is present — the gating happens downstream in GTM/Consent Mode.

Enabling

Enhanced Conversions are opt-in and disabled by default. Add the following line to your widgets configuration to enable them:

window.BilberryWidgetsGlobal.enhancedConversionsEnabled = true;

When the flag is off (default), no customer data is pushed to dataLayer.

When it fires

The Enhanced Conversions push only fires on the purchase event (i.e. on completed bookings, gift-card purchases, and value-card purchases). It does not fire on add_to_cart, begin_checkout, view_item, or any other event.

It also only applies to the GTM/dataLayer integration. The direct GTAG integration (useGtag = true) and the Meta Pixel integration are unaffected.

Pushed data shape

When enabled and a customer is present, two pushes are sent to window.dataLayer in the following order:

The Enhanced Conversions data:

window.dataLayer.push({
    enhanced_conversion_data: {
        email: 'jane.doe@example.com',
        phone_number: '+4799999999', // E.164 format
        first_name: 'Jane',
        last_name: 'Doe',
        home_address: {
            street: 'Storgata 1',
            city: 'Oslo',
            postal_code: '0155',
            country: 'NO', // ISO-3166 alpha-2
            // region: '...' (only when collected)
        },
    },
});

The regular purchase event push (unchanged from the section above).

Only fields that were actually collected during checkout are included. If only the email was collected, the push will contain just { email: '...' }. The push is skipped entirely if no fields are present.

Configuring the GTM tag

After enabling the flag in the widget configuration, you (or your digital marketer) need to configure the corresponding Google Ads Enhanced Conversions tag in Google Tag Manager, including:

The Google Ads Conversion Tracking tag
The Conversion Linker tag
Mapping enhanced_conversion_data.email, phone_number, first_name, last_name, and home_address.* from the dataLayer to the corresponding fields on the conversion tag.

These steps are performed entirely on the Google side; no further widget configuration is required.

Technical details (advanced users)

For developers or digital marketers, this section provides:

Technical details about how our events are structured.
Code examples to illustrate exactly how we register events against GTM or GTAG.

Event list

This is how an exampleItem might look like:
(This object is referenced in the table further down)

const exampleItem = {
    item_id: '123',
    item_name: 'Example product',
    item_category: 'Example category',
    price: 5000,
    quantity: 2,
    currency: 'NOK',
    coupon: 'EXAMPLE-CODE',
}

Event name	Details/Data
`add_to_cart`	Add item to the shopping cart. Data: `{ value: 1000, currency: 'NOK', items: [exampleItem, ...] }`
`remove_from_cart`	Remove an item from the shopping cart. Data: `{ value: 1000, currency: 'NOK', items: [exampleItem, ...] }`
`view_item`	Represents information about a product that has been viewed. Data: `{ value: 1000, currency: 'NOK', items: [exampleItem, ...] }`
`begin_checkout`	When navigating to the checkout page with a summary of all items in the cart. Data: `{ value: 1000, currency: 'NOK', items: [exampleItem, ...] }`
`set_checkout_step`	Where in the checkout process the user is. Here’s the following Steps: - Package - Extras - Contact Info - Payment - Success - Cancel Data: `{ checkout_step: 1, checkout_step_title: 'Contact Info' }` Please note that the step-number could vary based on if extras are enabled or not.
`purchase`	Register purchase after checkout-completion. Data: `{ value: 1000, currency: 'NOK', items: [exampleItem, ...] }`
`login`	User logged in. Data: `{ method: 'bilberry' }`
`add_payment_info`	Payment-info has been added. Data: `{ value: 1000, currency: 'NOK', coupon: 'EXAMPLE-COUPON' items: [exampleItem, ...] }`

Examples/Snippets

These examples are only meant to give you an idea how bilberry widgets registers analytics events against GTAG or GTM. You are not meant to do this manually.

// Registering an event using GTAG.
// This uses the global gtag() function that is provided
// by the GTAG-setup-snippet.
window.gtag('event', 'add_to_cart', {
    value: 3400, currency: 'NOK', items: [exampleItem, ...]
});

// Registering an event using GTM.
// This does a push to window.dataLayer[], which will be
// picked up by GTM.
window.dataLayer.push({
    event: 'add_to_cart',
    ecommerce: {
        value: 3400, currency: 'NOK', items: [exampleItem, ...]
    }
});