Analytics tags let you see how each Fibbl component on your website performs on its own. Add a short tag to a component, and every stats event it sends is labelled with that tag. You can then filter the Fibbl dashboard by tag.

A typical example: you show 3D on your product detail pages with fibbl-layer, and you also show a fibbl-bar in a lookbook or on a campaign landing page. Without tags, the dashboard counts the interactions from both places together. With a different tag on each component, you can see them separately.

Adding a tag in your code

Add the data-analytics-tag attribute to the component. It works on fibbl-model-viewer and on the composite components fibbl-layer and fibbl-bar. For a composite component, add the tag to the fibbl-layer or fibbl-bar element itself.

Product detail page:

<fibbl-layer data-product-id="12345" data-analytics-tag="product_page">
<button data-element="default">Default</button>
<button data-element="fibbl-model-viewer" class="fibbl-active">3D</button>
<button data-element="fibbl-qr-code" data-type="ar">AR</button> 
</fibbl-layer>

Lookbook or landing page:

<fibbl-bar data-product-id="12345" data-analytics-tag="lookbook">
<button data-element="fibbl-model-viewer">3D</button>
<button data-element="fibbl-qr-code" data-type="ar">AR</button> 
</fibbl-bar>

⚠️ “12345” in data-product-id is only a placeholder example and should be replaced with a dynamic variable.

Rules for tag names

A tag must not start with an underscore (_). If it does, the tag is ignored and the events are sent without a tag.
Each component has one tag.
Tags only apply to events sent after the tag was added. Earlier stats are not tagged.

ℹ️ We recommend short, lowercase names with underscores, such as product_page, lookbook or landing_page.

Setting a tag in Dist Settings

You can also add a tag without changing your website code, from Dist Settings in the Fibbl platform (app.fibbl.com). Dist Settings works for fibbl-layer and fibbl-bar as well as fibbl-model-viewer.

In Dist Settings, a data- attribute is written without the data- prefix and in camelCase, so data-analytics-tag becomes analyticsTag.

Go to Dist Settings in app.fibbl.com.
Paste the code below and change the values.
Click Validate & Format, then Update. You will see the message “The config has been validated, formatted and saved”.

If you want to tag every fibbl-layer on your site…

{
  "fibbl-layer": {
    "dataset": {
      "analyticsTag": "product_page"
    }
  }
}

If you want different tags for two components of the same type…

Use a list of settings with a selector. Each component uses the first entry whose selector matches it, so put the more specific entries first. An entry without a selector applies to all other components of that type.

{
  "fibbl-layer": [
    {
      "selector": ".lookbook fibbl-layer",
      "dataset": {
        "analyticsTag": "lookbook"
      }
    },
    {
      "dataset": {
        "analyticsTag": "product_page"
      }
    }
  ]
}

ℹ️ .lookbook fibbl-layer is only an example. Use a CSS selector that matches the component on your page.

If you already use Dist Settings…

Add the new component next to your existing settings in the same JSON object. Don't replace what is already there:

{
  "fibbl-model-viewer": {
    "dataset": {
      "initialRotation": "15 25"
    }
  },
  "fibbl-layer": {
    "dataset": {
      "analyticsTag": "product_page"
    }
  }
}

Tags in both your code and Dist Settings

If a component has a tag in its HTML and Dist Settings also sets a tag for it, the tag from Dist Settings is used. To give two components on the same page different tags, either set the tags in your code and leave analyticsTag out of Dist Settings, or use selectors as shown above.

Viewing tagged stats in the dashboard

Open the dashboard in app.fibbl.com (click the Fibbl logo in the top left corner).
In the Analytics section, open the Tags filter next to Locales and Brands.
Select one or more tags. The charts update automatically. Clear the filter to see all stats again.

The Tags filter lists the tags that have stats in the selected date range, so a new tag appears once its first events have been recorded.

Note: The filter applies to everything in the Analytics section, including Product breakdown, Interactions by device and Market breakdown. The cards at the top of the dashboard (Interactions yesterday, Interaction rate yesterday, Available models and Active models) always show all stats.

Did we miss something?

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

Tracking Fibbl components separately with analytics tags