All Collections
Installing Fibbl
Google Analytics
Enable Fibbl’s Google Analytics integration
Enable Fibbl’s Google Analytics integration
Learn how to get started collecting Fibbl events in your Google Analytics account
Mattias Österberg avatar
Written by Mattias Österberg
Updated over a week ago

Data is king. And at Fibbl we want to make sure that you have the data to make data driven decisions that results in real business outcome. This is why we have built an integration towards Google Analytics. This article explains what type of data Fibbl sends to Google Analytics, and how to get started using it.

What data that is available

When the Fibbl script is implemented on your product detail pages and there is an available model for the specific product, Fibbl can render and display its technologies for the website visitor. In those cases, there are three fundamental technical events that can happen in the user journey.

  1. The script will be loaded. This will always occur in case there is a matching model for the specific product.

  2. The visitor can view the Fibbl integration, by simply navigating to the place on the webpage where it is placed.

  3. The visitor can interact with the Fibbl integration, by simply clicking on the element or buttons to view the augmented product content.

These three events are also the base for what type of data we send to Google Analytics. Take a look below for the exact name of the events we send and their meaning.

Event name

Description

fibbl_load

The number of unique times the Fibbl integration (script) has been loaded. The script is only loaded when there is an available model on the specific product detail page that the visitor is browsing.

fibbl_display

The number of unique times the Fibbl integration has been viewed by a visitor.

fibbl_use

The number of times the Fibbl integration has been interacted with by a visitor, e.g. when a user click on button to view a product in the Augmented Reality Placement experience.

How to implement Fibbl’s GA integration

Here is how the code for the Fibbl script look like.

<script 
	src="https://cdn.fibbl.com/fibbl-bar.js" 
	type="module">
	data-fibbl-config
</script>

Here is how the code for the Fibbl script should look like in case you want to enable Fibbl to send data to your Google Analytics account.

<script 
        src="https://cdn.fibbl.com/fibbl-bar.js" 
        type="module"
	data-fibbl-config
	data-analytics-type="google"
	data-analytics-id="G-ABCABCABC">
</script>

⚠️ “G-ABCABCABC” in data-analytics-id is only a placeholder example and should be replaced with your own Google Analytics ID.

You simply just need to copy and paste two lines of code and exchange G-ABCABCABC with your account ID for Google Analytics. Note that a Google Analytics id is required, not the id of the Tag Manager (which starts with GTM-). Also, you have to add GoogleAnalytics or Tag Manger script on your page. If you use the Tag Manager, you also may need to add a Google Analytics GA4 tag into it with the same GA4 id you pass to the scripts.

How to leverage the data

Once the events are being sent to Google Analytics, you can of course look at the raw data to see how many times Fibbl was loaded, how many users that saw the integration and how many users that actually interacted with the integration and viewed the augmented product content. But you can also build your own custom audience in Google Analytics to segment users who have consumed augmented product content via Fibbl against those who have not, and then see differences in key performance indicators such as average time on page, page per session and conversion rate just to mention a few.

For Google Analytics 4 users

  1. Go to tab Configure

  2. Validate that the following events exists in the events list: fibbl_load, fibbl_display, fibbl_use

  3. Navigate to sub-tab Audiences and click on New audience

  4. Continue by clicking on Create a custom audience underneath the header “Start from scratch”

  5. Name your audience to something relevant that indicates that these users have interacted with augmented product content via Fibbl, e.g. Fibbl users

  6. Click on Add new condition underneath “Include Users when”, go to Events and add fibbl_use

  7. Click on Save


    🎥 To see all steps in video format, click here.

    First step completed, we have now created an audience that contains all users who have consumed augmented product content via Fibbl. Now we should create another one which contains all users who have not done so, furthermore which excludes the users who have.

  8. Click on New audience

  9. Continue by clicking on Create a custom audience underneath the header “Start from scratch”

  10. Name your audience to something relevant that indicates that these users have not interacted with augmented product content via Fibbl, e.g. Fibbl non users

  11. Click on the trash can icon 🗑 that belongs to the “Include Users when” section

  12. Click on Add group to exclude underneath the first block, continue by click on on Add new condition underneath “Temporarily exclude Users when” , go to Events and add fibbl_use. ****Compared to before, you should also Add a parameter to this condition: Add parameter > Other > Value > Condition: = > Value: 0 > Apply.

  13. Click on Save


    Second step completed, we have now created an audience that contains all users who have not consumed augmented product content via Fibbl. Now you can go ahead and add these two audiences as filters and compare data in your regular dashboards. 🎉



    ⚠️ When you create a new audience, it can take 24-48 hours for the audience to accumulate users.

For Google Universal Analytics users

As Google Universal Analytics is session based instead of event based as Google Analytics 4, the configuration of Fibbl’s Google Analytics integration is slightly different. To achieve the same result as possible with GA4, you will need Google Tag Manager (GTM). Most likely you already have Google Tag Manager set up, but if not – we refer you to the official installation guide written by Google.

  1. Log-in to Google Tag Manager

  2. Validate your implementation by clicking Preview in the top right corner, go to a product detail page where you know Fibbl technologies are integrated, interact with the technologies and look following events exists in the list to the left hand column: fibbl_load, fibbl_display, fibbl_use

  3. Navigate to Triggers tab in GTM and click on New

  4. Name your Trigger to something relevant that reflects the type of event you are configuring. For this example, we will configure the fibbl_use event and therefore also name it to fibbl_use for simplicity

  5. Click anywhere inside the box named Trigger Configuration

  6. Choose trigger type Custom Event

  7. Copy fibbl_use and paste it in the Event name field, ensure All Custom Events are selected underneath the text “This trigger fires on”. It’s important that the formatting of this Event name exactly matches our data layer variable: fibbl_load, fibbl_display, fibbl_use

  8. Click on Save

  9. Continue by navigating to the Tags tab and click on New

  10. Name your tag to something relevant that reflects the type of event you are configuring. As we are configuring fibbl_use for this example, we will name it to fibbl_use tag for simplicity

  11. Click anywhere inside the box named Tag Configuration

  12. Choose tag type Google Analytics: Universal Analytics

  13. Select Event as Track Type

  14. You should now see four text fields; Category, Action, Label and Value. You can either hard code the naming or choose a dynamic variable, the values inserted will be reflected in your Google Analytics account. Feel free to use the same structure as our example:

    Category: Fibbl (text)
    Action: Event (Dynamic variable, click on the lego icon with the plus icon to see the list of available variables)
    Label: Page URL (Dynamic variable, click on the lego icon with the plus icon to see the list of available variables)
    Value:


  15. Ensure Non-Interaction Hit is set to False and select the correct Google Analytics variable in the Google Analytics Settings dropdown. If this is missing, create a new one according to the instructions from Google Tag Manager.

  16. Click anywhere inside the box named Triggering

  17. Choose the relevant trigger, in our example it’s the one we created before with the name fibbl_use

  18. Click on Save

    First step completed, we have created a tag that is triggered on our desired custom event – in this case fibbl_use. Navigate to the Realtime report and Events tab in Google Analytics, browse a product detail page you know where Fibbl technologies are integrated, interact with the technologies and see the event be shown in real time with correct Event Category and Event Action. Now you should redo all the above steps again, but this time for fibbl_load and fibbl_display. Once you completed these steps for all three events you can continue.


    We will now create segments based on these events so you can compare metrics between all users who have consumed augmented product content via Fibbl with those who has not.

  19. In Google Analytics, navigate to Admin and go to Segments just underneath “Personal tools & assets”

  20. Click on New segment

  21. Name your segment to something relevant that indicates that these users have interacted with augmented product content via Fibbl, e.g. Fibbl users

  22. Click on the Conditions item located underneath Advanced

  23. Click on the drop-down that says “Ad Content”, search on Event Action and select it. Let the condition be contains and type fibbl_use in the free text field

  24. Click on Save

  25. Repeat step 20-24 but change the filter above the condition contains from Include to Exclude – as we want to differentiate the users who have not consumed augmented product content via Fibbl

    Second step completed, we have now created two segments; one that contains all users who have consumed augmented product content via Fibbl and one with all users who have not consumed augmented product content via Fibbl. Now you can go ahead and add these two segments as filters and compare data in your regular dashboards. 🎉

    ⚠️ When you create a new segment, it can take 24-48 hours for the segment to accumulate users.

Did we miss something?

Not to worry! Just email our support team at help@fibbl.com. ✌️

Did this answer your question?