Global configuration

The scripts can be provided with a global configuration. It can be used to configure Google Analytics, locale and for local development.

Code example

<!-- IMPORTANT: the config MUST contain "data-fibbl-config" attribute -->
<script
    src="https://cdn.fibbl.com/fibbl.js" type="module"
    data-fibbl-config
    data-locale="sv-SE"
    data-analytics-type="google"
    data-analytics-id="G-ABCABCABC"
    data-analytics-event-handler="globalFunctionNameHere"
    data-token="token_given_by_Fibbl"
></script>
<!-- any other scripts, the config should be only in the first one -->

Requirements

The configuration must comply with the following rules:

1. It must be provided in the first script tag used to include a Fibbl script.
2. If you use several scripts it must be added only to the first one.
3. It has to contain data-fibbl-config attribute with no value as a unique mark of the single source of global config.
4. It may contain other data- attributes with the payload.

Locale

By default, Fibbl components use the English language. If you want to change that, you should add a locale code:

data-locale="sv-SE"

The code is an IETF BCP 47 language tag. Usually it consists of 2-letter ISO 639-1 language code, a hyphen -, and a 2-letter ISO 3166-1 alpha-2 country code (conventionally written in upper case), so Swedish in Sweden is sv-SE. However, other variants are possible, e.g. nl, fr-FR, zh-Hans-CN. Use the links to find codes for your language and country.

If there is no country-specific version of a language in the components, a default version for that language will be used. For example, right now ru-RU and ru-LV are completely the same. If a language isn't supported at all, the default locale will be used.

Google Analytics

To make the scripts send event to your Google Analytics account, you should add 2 properties to the global config:

data-analytics-type="google"
data-analytics-id="G-ABCABCABC"

The data-analytics-type must be google, and the data-analytics-id must be a Google tag ID, which usually starts with G-. Here are instructions on how to find the ID.

Also, you have to add Google Analytics or Tag Manger scripts to your page. If you use the Tag Manager, you may need to add a Google Analytics GA4 tag to it with the same Google tag ID, which you pass to Fibbl scripts.

Custom analytics event handler

By default, all events are pushed to dataLayer via gtag function. That is, it's expected that you have a GA script on your page. If you use GTM instead, you may want to send events to your GTM account instead of GA account. You can do it with a custom analytics event handler.

Add to the config:

data-analytics-event-handler="globalFunctionNameHere"

The types:

type EventName = 'fibbl_load' | 'fibbl_display' | 'fibbl_use' | string;

interface AnalyticsPayload {
    productId: string;
    feature?: 'vto' | 'ar' | '3d' | 'images' | 'video' | string;
    analyticsProductId?: string;

    [key: string | any]: any; // for future enhancements
}

type AnalyticsEventHandler = (eventName: EventName, payload: AnalyticsPayload) => void;

An example:

<script>
    window.dataLayer = window.dataLayer || [];
    window.fibblEventHandlerGTM = (eventName, payload) => {
        window.dataLayer.push({ // GTM event structure
            event: eventName,
            ...payload,
        });
    }

    // Or for GA with gtag:

    function gtag() { dataLayer.push(arguments) }

    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXXX');
    window.fibblEventHandlerGtag = (eventName, payload) => gtag('event', eventName, payload);
</script>

<script src="https://cdn.fibbl.com/fibbl.js" type="module"
        data-fibbl-config
        data-locale="sv-SE"
        data-analytics-type="google"
        data-analytics-id="G-XXXXXXXXXXX"
        data-analytics-event-handler="fibblEventHandlerGTM"
></script>

You can see 2 functions above - fibblEventHandlerGTM and fibblEventHandlerGtag. The second one, fibblEventHandlerGtag, is used by default, if you don't set a custom analytics event handler.

Local development

With no additional configuration scripts are allowed to fetch product data only from the company website. If a request is made from a different origin, it will be blocked by the backend, and you will get an error.

To test scripts on localhost (or any other domain), you should add an access token to the global configuration:

data-token="token_given_by_Fibbl"

The token can be found in the company settings on the Fibbl Client Portal.

You must NEVER use the token in production on a publicly available website. It is to be used only for development or on the back-end.

In all subsequent code examples we don't use a token as it must be on a production website.