Google Tag Manager and Google Analytics

Google Tag Manager (GTM) is a free tool that makes it easy to add and manage marketing and analytics tags (like tracking codes, pixels, and scripts) on your website or app without needing to change the actual code.

Google Analytics (GA) is a platform that collects and analyses data about how visitors interact with your website or app, giving insights into traffic, user behaviour, conversions and performance.

GTM helps you deploy and manage tags, while GA helps you understand and analyse the data. They can be used together to get powerful insights on your website.

How it Works

By default, Bilberry Widgets automatically send information about what users do into your website’s tracking system (the dataLayer). If you use Google Tag Manager on your website, it will pick up these actions and pass them on to Google Analytics so you can see them in your reports.

We also support registering analytics events directly against Google Tag (GTAG) instead of through the default dataLayer/GTM option.

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/e-commerce compatible format, and will be automatically displayed correctly in Google Analytics.

See Google’s own page about Measure ecommerce for more details.

In order for either the GTAG or GTM approach to work, make sure you have 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 do not need to do anything else – events will be correctly registered and visible in your Google Analytics dashboard.

If you have decided to use the GTM approach, continue reading the next section (Configure Google Tag Manager) for details on how to set up this configuration.

Configure Google Tag Manager (GTM)

This section contains instructions on how to set up your GTM configuration.

Do not follow this section if you have chosen to go with the GTAG approach, as these steps are not required for that setup.

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 do not want the default behaviour (UA), but 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, to get started, you need to create two tags and one single trigger, as specified below:

Creating TRIGGER: Custom Event

Inside your Google Tag Manager account, select the Triggers section.
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

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

Creating TAG (2): Google Analytics: GA4 Event

Inside your Google Tag Manager account, select the Tags section.
Click New to create a new tag.
Set Tag Name = Google Analytics.
Set Tag Type = Google Analytics: GA4 Event.
Set the Measurement ID = Measurement-ID/Tag-ID found in your GA account.
Set Event Name = {{Event}}
Select/check 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 first step.
Click Save.

Events should begin to appear in your GA account.

Since events are structured in a GA4/ecommerce compatible format, the data will automatically be displayed correctly in your analytics reports.

Technical Details for 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:

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

This object is referenced in the table under.

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 is the tracked 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 an idea of 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, ...]
    }
});