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.

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, ...]
    }
});