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.
The script will be loaded. This will always occur in case there is a matching model for the specific product.
The visitor can view the Fibbl integration, by simply navigating to the place on the webpage where it is placed.
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
Go to tab Configure
Validate that the following events exists in the events list:
fibbl_load
,fibbl_display
,fibbl_use
Navigate to sub-tab Audiences and click on New audience
Continue by clicking on Create a custom audience underneath the header “Start from scratch”
Name your audience to something relevant that indicates that these users have interacted with augmented product content via Fibbl, e.g. Fibbl users
Click on Add new condition underneath “Include Users when”, go to Events and add fibbl_use
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.Click on New audience
Continue by clicking on Create a custom audience underneath the header “Start from scratch”
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
Click on the trash can icon 🗑 that belongs to the “Include Users when” section
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.
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.
Log-in to Google Tag Manager
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
Navigate to Triggers tab in GTM and click on New
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 simplicityClick anywhere inside the box named Trigger Configuration
Choose trigger type Custom Event
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
Click on Save
Continue by navigating to the Tags tab and click on New
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 simplicityClick anywhere inside the box named Tag Configuration
Choose tag type Google Analytics: Universal Analytics
Select Event as Track Type
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: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.
Click anywhere inside the box named Triggering
Choose the relevant trigger, in our example it’s the one we created before with the name fibbl_use
Click on Save
First step completed, we have created a tag that is triggered on our desired custom event – in this casefibbl_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 forfibbl_load
andfibbl_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.In Google Analytics, navigate to Admin and go to Segments just underneath “Personal tools & assets”
Click on New segment
Name your segment to something relevant that indicates that these users have interacted with augmented product content via Fibbl, e.g. Fibbl users
Click on the Conditions item located underneath Advanced
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
Click on Save
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. ✌️