This guide is intended to inspire – not instruct. All data and events used within the reporting setup described below depend entirely on your GA4 configuration. That means the funnel steps, segmentation logic, and event tracking may look different for your brand. What we share here is simply one way of doing it – a reference point to help you get started faster.
⚠️ Important note: The Fibbl script automatically fires events to your GA4 property if you’ve followed the implementation steps outlined in this guide. However, Fibbl does not own or control any GA4-related data. It’s entirely up to you to ensure that your GA4 setup is correctly configured and reliable for measuring the impact of Fibbl’s experiences.
If you are new to creating custom reports in GA4, following this guide step by step and getting an exact replica will take you approximately 25 minutes.
Introduction – What you can track
When the Fibbl script is implemented on your product detail pages and there is an available 3D 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 web page where it is placed.
The visitor can interact with the Fibbl integration, by simply interacting with the element (e.g. 3D, AR, VTO).
These three events is also the raw data we send to Google Analytics automatically when the script is implemented in the correct way, and can be used to segment users and view the difference in traditional metrics like time spent on site, pages per session, conversion rate when Fibbl is involved versus not involved. Take a look below for the exact name of the events we send and their meaning.
Event name | Description |
fibbl_load | The number of 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 times the Fibbl integration has been viewed by a visitor. "Viewed" have different meanings depending on what experience you have implemented. If you are using the fibbl-bar buttons, both fibbl-display and fibbl-use will be triggered when a user click on the buttons. |
fibbl_use | The number of times the Fibbl integration has been interacted with by a visitor, e.g. when someone twist and turn the 3D model in the model viewer when using the model-viewer or the fibbl-layer components. If you have implemented the fibbl-bar this event eill be triggered when the user clicks the button. |
Implementation – How to enable the tracking
Below you can see what the generic Fibbl script looks like. As long as you have added your specific GA4 Measurement ID in data-analytics-id, the events will be sent automatically to your GA4 property as soon as you are live with the script.
<script
src="https://cdn.fibbl.com/fibbl.js" type="module"
data-fibbl-config
data-locale="en-US"
data-analytics-type="google"
data-analytics-id="G-ABCABCABC"
></script>
Not sure which ID to use? This is how you find the ID in GA4.
Navigate to Admin in GA4
Click on 'Data streams' within the "Data collection and modification" section
Select the main data stream
Copy 'MEASUREMENT ID'
Validate implementation
If everything is set up correctly and you are live with the script in production, the different event types should start to trickle in. To validate, simply:
Navigate to Admin in GA4
Click 'Events' within the "Data display" section
Look out for the event types fibbl_load, fibbl_display and fibbl_use
Nothing in sight? Reach out to your dedicated Customer Success Manager and we will help you troubleshoot.
Setting up a Fibbl dashboard in GA4
1. Registering custom dimensions for Fibbl features
In order to review the performance breakdown per each Fibbl feature separately, those need to be registered in the GA4 UI first with the following steps:
1.1. In the Google Analytics Admin section, under the "Data display" section, click "Custom definitions"
1.2. Click [Create custom dimension]
1.3. Create a custom definition with the following conditions and click [Save]
2. Creating segments in Explorations
It might take some time for the newly registered ‘feature’ dimension to be populated with values, nonetheless we already can proceed with creating the report starting with segments to be applied within the report itself:
2.1. In the Explore tab, click [+] to create a blank report
2.2 Add the All Users segment by clicking on the [+] in the “SEGMENTS” section, selecting All Users and clicking [Confirm]
2.3. Add the Fibbl use segment by clicking on the [+] in the “SEGMENTS” section and clicking [Create a new segment]
2.4. Select a User segment
2.5. Make the following configurations and click [Apply]
2.6. Follow the same steps for another segment creation - No Fibbl use - with the following configurations and click [Apply]
3. Adding all the metrics and dimensions
In order to see any values within the Exploration it is necessary to add all the metrics & dimensions to be used:
3.1. Add dimensions by clicking on the [+] in the “DIMENSIONS” section and making the following selection by clicking on checkboxes (you can use the search bar for easier navigation):
a. Event name
b. Device category
c. Feature
d. Item category
e. Item name
3.2. Click [Confirm] and verify that you have the view below
3.3. Add metrics by clicking on the [+] in the “METRICS” section and making the following selection by clicking on checkboxes (you can use the search bar for easier navigation):
a. Sessions
b. Total users
c. Transactions
d. Session key event rate
e. User key event rate
f. Items viewed
g. Items added to cart
h. Items purchased
j. Item revenue
3.4 Click [Confirm] and verify that you have the view below
4. Fibbl conversion funnel
Configure the Fibbl conversion funnel by completing the steps below:
4.1. In the “TECHNIQUE” section, choose Funnel exploration
4.2. Click on the pencil in the “STEPS” section
4.3. Configure the funnel steps with the configurations below and click [Apply]
4.4. Add a device breakdown by dragging and dropping the Device category dimension into the “BREAKDOWN” section
4.5. The following view is the final result
5. Feature comparison
Configure the Feature comparison by completing the steps below:
5.1. Click on the arrow denoting the newly created funnel tab and click [Duplicate]
5.2. Replace the Device category dimension with the Feature dimension in the “BREAKDOWN” section and remove the first 2 steps from the funnel to have the following view as the final result
6. Funnel comparison
Configure the Funnel comparison by completing the steps below:
6.1. Click on the arrow denoting the newly created funnel tab and click [Duplicate]
6.2. Modify the steps within the funnel by clicking on the pencil in the “STEPS” section and make the following tweak to the first step, click [Apply]
6.3. Drag and drop all the segments configured before into the “SEGMENT COMPARISONS” section and replace the Feature dimension with the Device category dimension to have the following view as the final result
7. Main KPI comparison
Configure the Main KPI comparison by completing the steps below:
7.1. Click on the [+] near all the visualization tabs and select Free form
7.2. Drag and drop all the segments configured before into the “SEGMENT COMPARISONS” section and place Device category in the “ROWS” section
7.3. Select Sessions, Total users, Transactions, Sessions key event rate & User key event rate in the “VALUES” section and place the following regex in the “FILTERS” section applicable to the Event name dimension with the matches regex condition - session_start|purchase|page_view - to have the following view as the final result
8. Product performance
Configure the Product performance by completing the steps below:
8.1. Click on the [+] near all the visualization tabs and select Free form
8.2. Drag and drop all the segments configured before into the “SEGMENT COMPARISONS” section and place Item name in the “ROWS” section
8.3. Select Items viewed, Items added to cart, Items purchased & Item revenue in the “VALUES” section and change the selection to Heat map in the “CELL TYPE” section to have the following view as the final result
9. Product category performance
Configure the Product category performance by completing the steps below:
9.1. Click on the arrow denoting the newly created table tab and click [Duplicate]
9.2. Replace the Item name dimension with the Item category dimension in the “ROWS” section to have the following view as the final result
10. Timeline
Configure the Timeline by completing the steps below:
10.1. Click on the [+] near all the visualization tabs and select Free form
10.2. Drag and drop all the segments configured before into the “SEGMENT COMPARISONS” section and choose a line in the “VISUALIZATION” section
10.3. Select Session key event rate in the “VALUES” section and place the following regex in the “FILTERS” section applicable to the Event name dimension with the matches regex condition - session_start|purchase|page_view - to have the following view as the final result