Skip to main content
Skip table of contents

Web SDK

The web SDK enables a number of FunnelConnect services, including:

  • Info Ident Track API.

  • ID Sync (for example Floodlight and other AdTech and conversion tracking solutions).

  • Utiq martechpass.

The web SDK is integrated using fcTag.js.

Teavaro’s media integration services operate only under our client’s domain(s). This is in line with our services acting solely as data processor and any data obtained fully belonging to the client.

A prerequisite for the web SDK integration is therefore the setup of a subdomain for all of the sites its running on. Please also confirm if you are using subdomains, as we will need to enable them.

Our default setup uses A record, and depending on your region, we will provide you with the addresses for your DNS setup.

If you are using CAA records, you must allow the letsencrypt.org domain on all the subdomains created for the Teavaro service. More information you find in the Let’s Encrypt CAA records documentation.

Profile data returned with Info Ident Track API calls is stored in fcData local storage key as JSON object.

Getting Started

The web SDK configuration is automatically obtained through the fcTag.js execution via the specified domain.

For example this tag would automatically load brand-demo-com.js.

JS
(function(){
 var script = document.createElement("script")
 script.type = "text/javascript"
 script.src = "https://fc.{your domain}/fcTag.js"
 document.head.appendChild(script)
})();

Integration via Tag Manager

Teavaro supports any tag manager integration, for example using GTM with custom HTML tag:

JS
<script>  
(function(){
 var script = document.createElement("script")
 script.type = "text/javascript"
 script.src = "https://fc.{your domain}/fcTag.js"
 document.head.appendChild(script)
})();
</script>

Consent Manager Integration

If you are using a Consent Manager Platform to manage your cookie consent, we recommend that you only load the Teavaro tag once the required consent has been granted.

The Teavaro service can also capture the cookie consent to store it against the user profile.

Teavaro Consent Management

Teavaro provides a server-side consent management capability, which lets you define any type of data collection and processing purpose.

We also provide a consent notification, which can be enabled using teavaroConsentManager.js.

The custom HTML tag including our consent manager would be:

JS
<script>  
  (function(){
    // load client config file
    var clientConfigScript = document.createElement('script'); 
    clientConfigScript.type = 'text/javascript';
    clientConfigScript.src = 'https://fc.{domain-name}/{domain-name, dot(s) are hyphenated}.js"';
    
    document.head.appendChild(clientConfigScript).onload = function(){
      // load teavaroConsentManager.js
      var teavaroConsentManagerScript = document.createElement('script');
      teavaroConsentManagerScript.type = 'text/javascript';
      teavaroConsentManagerScript.src = 'https://fc.{your domain}/teavaroConsentManager.js';
      document.head.appendChild(teavaroConsentManagerScript);
    }();
  })();
</script>

Data Layer Data Capture

While Teavaro provides its own fcDataLayer data layer, more commonly clients tap into their existing data layers.

Our Web SDK provides the means to configure what data, including nested JSON objects, are included with analytics tracking.

Google and other Data Layers

Our library can capture data from 3rd party data layers, for example, Google’s dataLayer or Tealium’s utag data layer.

JS
{
  "ROOT_VARIABLE": ["anyDataLayer1", "anyDataLayerN, "anyDataLayer:specificKey"],
  "VARIABLES_DELIMITER": ":",
  "SITE_VARIABLES": ["anyVariable1", "anyVariable2", "anyVariableN"],
  "TRACK_DATALAYER_VARIABLES": {
      anyDataLayer1: {
        anyVariable1: [1, 2],
        anyVariable2: [3],
      },
      // note: for objects wrapped inside arrays, an extra level must be added
      anyDataLayer2: {
        anyVariable1: [2],
      },
    },
  "GOOGLE_CONFIGURATION": {
    "DISPATCH_DATALAYER_UPDATED_EVENT": true,
    "EVENT_ATTRIBUTE_LIST": {
      "event_name" : ["attribute1, attribute2,", "attributeN"]
    },
    "GOOGLE_DATALAYER_NAME": "dataLayer"
  },
}

For a comprehensive overview of each option, please refer to Configuration Data.

Here is a configuration example that illustrates a mixed implementation of Tealium’s utag alongside Google’s dataLayer:

JS
{
  "ROOT_VARIABLE": ["utag:data"],
  "VARIABLES_DELIMITER": ":",
  "SITE_VARIABLES": ["event_data", "page_url"]
  "TRACK_DATALAYER_VARIABLES": {
      utag: {
        pageInfo: [1, 4],
        productInfo: [2],
      },
      dataLayer: {
        currency: [2],
        items: [2]
      },
    },
  "GOOGLE_CONFIGURATION": {
    "DISPATCH_DATALAYER_UPDATED_EVENT": true,
    "EVENT_ATTRIBUTE_LIST": {
      add_to_cart: [
          'currency',
          'item_category',
          'item_brand',
          'item_id',
          'item_name',
          'coupon',
          'value',
          'price',
          'discount',
          'quantity',
        ],
      begin_checkout: [
          'currency',
          'item_category',
          'item_category2',
          'item_brand',
          'item_id',
          'item_name',
          'coupon',
          'value',
          'price',
          'discount',
          'quantity',
          'brand',
        ],
    },
    "GOOGLE_DATALAYER_NAME": "dataLayer"
  },
}

Teavaro’s fcDataLayer

Teavaro’s fcDataLayer is defined at window.fcDataLayer, it handles:

  • Product data: Product name, price, category.

  • Marketing campaign data: Traffic source, medium.

  • Transaction data: Cart value, checkout date.

  • Customer data: New or returning customer or visitor.

The following fields are available in fcDataLayer:

JS
"permission" : {},
"notification" :{},
"page" : {},
"product" : {},
"campaign" : [{}],
"action" : [{}],
  • “permission” is mainly addressing the consent or legitimate interest-based marketing data capture and processing requirements under GDPR and similar regulations. Permission records the specific permissions accepted or rejected.

  • “notification” covers the display, via popup or otherwise, of the information and controls required by regulation giving transparency and controls to the user (data subject) and can be used to differentiate between different notifications addressing different marketing permissions (consent or legitimate interest).

  • “page” addresses all required information about the visited page like page name, address/URL, page ID, and referrer.

  • “product” covers all product information like product name, category, description, identifier, price, promotion, location, etc.

  • “campaign” refers to specific marketing campaign information campaign identifier, name, source (e.g. search, paid display channel), medium/type (e.g. video, banner) and is passed to the page as query strings.

  • “action” includes clicks concerning specific events like consent accept/reject, add to basket, checkout, login, etc.

Configurations:

To enable this feature, one of these configurations must be set to true:

JS
const CALLS_CONFIG = {
  ...
  callsToMake: {
    fcTrack: true, // process the queue using track call
    info: {
      ...
      fcTrack: true, // process the queue using info-track call
      ...
    }
  }
  ...
}

Additional setting:

JS
const FC_CONF = {
  ...
  INTERVAL_IN_MILLISECONDS: 10000; // interval in ms to process events in the queue, default to 5000
  ...

Sample:

JSON
{
  "permission": {
    "CS-UTIQ": true
  },
  "notification": [
    {
        "name": "MAIN_CS",
        "version": 1,
        "permissions": [
            "CS-OM",
            "CS-OPT",
            "CS-NBA"
        ],
        "date": "1715675955904"
    }
  ],
  "action": [
    {
      "name": "ui_interaction",
      "action": "click",
      "category": "consent",
      "label": "accepted",
      "timestamp": 1715756684073
    }
  ],
  "page": {
    "timestamp" : "1713895860",
    "name": "Hillshire Farm Lit’l Smokies Salchicha ahumada, 14 oz",
    "action": "navigation",
    "url": "https://web.brand-demo.com/product/hillshire-farm-litl-smokies-salchicha-ahumada-14-oz/"
  },
  "product": {
    "name": "/product/hillshire-farm-litl-smokies-salchicha-ahumada-14-oz/",
    "action": "view",
    "pricing": "€5.31"
  },
  "campaign": [
    {
      "name": "20252883263",
      "source": "Google",
      "medium": "cpc",
      "id": "a74d8886-5df9-4baa-b776-166b3bf9111c"
    }
  ]
}

Reference

JavaScript API

The JavaScript API is enclosed within Teavaro namespace and can be used in any JavaScript snippet after the fcTag.js is loaded successfully. It provides multiple functionalities that can be used to achieve specific goals or improve data and flow analysis.

getFcDataEntry

getFcDataEntry method provides access to data from the client (browser). It accepts the following entry keys as a param: umidattributesidentifierspermissionspermissionsLastModificationnotificationHistory, and notificationStatus. In case of error, null value is returned, and a descriptive error message is shown to the user via console.

Example:

JS
Teavaro.API.getFcDataEntry('attributes', 'umid')

Return types: object key-value-pairs.

Return values (input-based):

null for errors.

umid: e.g. { umid: c3641a83-3ae3-412f-b234-ea91cfaa3242 }

attributes example:

JSON
{
    attributes: {
        "browserFamily": "Chrome",
        "browserType": "BR",
        "browserVersion": "132.0.0.0",
        "cc": "DE",
        "city": "Frankfurt am Main",
        "deviceName": "PC",
        "domainName": "amazon.com",
        "isp": "A100 ROW GmbH",
        "latitude": "50.11088",
        "longitude": "8.681996",
        "usageType": "DCH",
        "mcc": "",
        "mnc": "",
        "mobileBrand": "",
        "osFamily": "Windows",
        "region": "Hessen",
        "nba1": "nba1",
        "nba2": "nba2",
        "attribute1": "value1",
        "attribute2": "value2",
        "fctk": "iBzk0liUOiM.1746803293605.pEPMj7DG4OChBwQCgy8Uk9MgfENQ254evuTUNkbF4hg"
    }
}

identifiers example:

JSON
{
    identifiers: [{
            "name": "fc_hemail",
            "value": "c98ba13fd5a342230e1e6c32d2bef7cc36d3125cce987ad3ecd5e6de3631dfea"
        },
        {
            "name": "fc_hcid",
            "value": "f6fa4edf58d07bb14de6f731eebc37e122a44c760bbc2e4ce982d106accbf791"
        }
    ]
}

permissions example:

JSON
{
    permissions: {
        "CS-OM": true,
        "CS-OPT": true,
        "CS-NBA": true
    }
}

permissionsLastModification example:

JSON
{
    permissionsLastModification: {
        "CS-OM": "2024-06-19T16:17:41.607Z",
        "CS-OPT": "2024-06-19T16:17:41.607Z",
        "CS-NBA": "2024-06-19T16:17:41.607Z"
    }
}

notificationHistory example:

JSON
{
    notificationHistory: {
        "name": "MAIN_CS",
        "version": 1,
        "permissions": [
            "CS-OM",
            "CS-OPT",
            "CS-NBA"
        ],
        "date": "2024-06-19T16:17:41.607Z"
    }
}

notificationStatus example:

JSON
{
    notificationStatus: {
        "CS-NBA": true,
        "CS-OM": true,
        "CS-OPT": true,
        "CS-UTIQ": false
    }
}

Using multiple keys in one call:

Teavaro.API.getFcDataEntry('umid', 'identifiers');

Response:

JSON
{
    "umid": "b79fc820-70fc-4f03-8613-9887552d2b19",
    "identifiers": [{
            "name": "mt1",
            "value": "mt1-67h2p9VVPK2RWwuK7UJVSg"
        },
        {
            "name": "mt2",
            "value": "mt2-L8NMTaL2Ee2DSrWyuwgESA"
        },
        {
            "name": "customerId",
            "value": "003Td00000GSxn9IAD"
        },
        {
            "name": "email_sha256",
            "value": "a684079545719bb06100288b8ad5c97b0d2223935beb42eda37abedd4b074aca"
        }
    ]
}

showConsentManager

This method opens the Teavaro Consent Manager notification popup.

JS
Teavaro.API.showConsentManager()

Example use:

JS
<button onclick="Teavaro.API.showConsentManager()">Teavaro Consent Manager</button>

setVerboseLoggingLevel

This method sets the logging level to verbose to enable extended logging. This logging level includes DEBUG and TRACK messages, granting more information that can be used to get specific information about any flow step or provide more information about an underlying issue. The logging level is saved to the browser’s local storage, so the extended logs will be enabled as long as the entry is in the local storage. It can be re-set to the default value by using resetLoggingLevel method explained below.

JS
Teavaro.API.setVerboseLoggingLevel()

Return type: none

Return values: none

This method logs [FC_TAG]: [INFO] Verbose logging level has been set message, that indicates the logging level has been set successfully.

resetLoggingLevel

This method re-sets the logging level to the default from any other logging level by removing logging level local storage entry. Default logging level includes only ERROR, WARNING and INFO messages, which provides sufficient information about the operations that are happening as the flow progresses. This method does not need to be called to enable the default logging, as it is enabled as soon as the fcTag.js loads. It can be used to re-set the logging level set by setVerboseLoggingLevel.

JS
Teavaro.API.resetLoggingLevel()

Return type: none

Return values: none

This method logs [FC_TAG]: [INFO] Logging level has been reset to info level message, that indicates the logging level has been set back to default successfully. If the verbose logging level was set beforehand, it could also show couple of other entries mentioning value of the current logging level, that is set in browser’s local storage.

addEventListener

This method attaches a custom callback to our defined events

JS
Teavaro.API.addEventListener(eventName: string, callback: any)

Return type: none

Return values: none

Example:

JS
Teavaro.API.addEventListener('onFcDataAvailable', ({notificationStatus, permissions, attributes, state, identifiers}) => {
  // execute a custom callback
})

Events

onFcDataAvailable

If you want to fetch the latest data from fcData, using the event listener to trigger your API call would be the recommended solution, as it ensures you get the latest data directly after it has been updated.

This event is fired right after the call has updated fcData localStorage with the newest attributes, including:

Attribute name

Type

attributes

JSON object with key-value-pairs using string data type.

identifiers

JSON array of objects with name and value key-value-pairs, all using string data type.

permissions

JSON object with key-value-pairs, using boolean values.

notificationStatus

JSON array with object.

state

Key-value-pair with numeric value.

JS
window.Teavaro = window.Teavaro || {};
window.Teavaro.config = {
    listeners: {
        onFcDataAvailable: ({
            attributes,
            identifiers,
            notificationStatus,
            permissions,
            state,
        }) => {
            // Single callback action
           }
    }
};

Configuration Data

The Web SDK provides extensive configuration capabilities defined in client and domain-specific config files.

Endpoints Configuration

API_HOST

  • string full host with the path of Teavaro’s API endpoint, e.g. https://fc.yourdomain.com/op.

IDCONNECT_API_HOST

  • string full IdConnect host with path, e.g. https://fc.yourdomain.com/op/idconnect.

SCRIPT_SUBDOMAIN

  • string value used to load the templates from a specific subdomain for consent manager and popup manager modules. If properly set up, the templates will be loaded from https://SCRIPT_SUBDOMAIN.your-domain.com/teavaro/templates/template-name-tmpl.js. The default is fc.

Calls Configuration

conditions

  • object to configure how the calls will behave, per session or per time interval.

JS
conditions: {
    timeConditions: {
        oncePerSession: false,
        oncePerTimeInterval: null, // Time in MS or null
    },
    oncePerPage: true,
    urls: null,
}

oncePerSession

  • boolean value defining if the calls should be made once per user session instead of every library load into the browser.

  • is superseded by oncePerTimeInterval and callsPerPage configuration, explained below.

oncePerTimeInterval

  • null or number value defining the interval after which the session calls should be made again.

  • null value means that the setting won’t be checked.

  • number value should be represented in milliseconds, e.g. null / 60000.

info

  • boolean or object value defining whether the Info Ident Track call should be made and what data should be provided

  • false value means that the Info Ident Track call won’t be done at all, while true value means that the call will be done with no additional data or parameters.

  • object types:

    • Optional track property in the info object determines if the info call will be used for tracking 3rd party dataLayers, such as Tealium’s utag or Google’s dataLayer.

    • Optional fcTrack property in the info object determines if the info call will be used for tracking Teavaro’s fcDataLayer, the events, are sent as batches.

    • Optional consent_umid property in the info object enables the umid as lookup id for FunnelConnect. For this feature to work the website will have to store the umid in consent_umid key in session storage beforehand.

  • Optional ident property to retrieve customer identifiers from different browser storage locations including data layer, session or local storage, cookies, etc.

    • customerId can be either a function that returns a string or a number or an object if the identifier is stored in a JWT token cookie. For identifiers consisting of PII, for example email address, stored in JWT cookies, it allows hashing the identifier using the configuration entry shouldHash.

    • customerKey is the value used to be the key of the identifier in the info query string payload.

JS
//configuration example for ident

const findCustomerId = () => window.sessionStorage.getItem('enemail');

ident: [
  {
    customerId: {
      cookie: '[cookie name]',
      identifierName: '[identifier name captured from JWT value]',
    },
    customerKey: 'e10',    // Parameter to pass customer ID.
    },
  {
    customerId: {
      cookie: '[cookie name]',
      identifierName: '[identifier name captured from JWT value]',
      shouldHash: true,    // value is hashed using sha256
    },
    customerKey: 'e11',    // Parameter to pass hashed email.
    },
  {
    customerId: findCustomerId(),    // Function to obtain customer ID from local storage, cookie or data layer.
    customerKey: 'enemail_key',
    getCustomerId: findCustomerId    // Optional retry to capture customer ID on subsequent page load.
  },
],

track

  • boolean value defining whether the track call should be made. false value means that the track call won’t be done at all, while true value means that the call will be done.

idConnect

  • boolean value defining whether the idConnect calls flow should be made. false value means that the idConnect calls flow won’t be done at all, while true value means that the calls flow will be done.

subscribe

  • boolean or object value defining whether the track call should be made and with what parameters. false value means that the track call won’t be done at all, while true value is not supported, it must be specified with object value following this pattern:

JS
{
    subscriberId: window.sessionStorage?.subemail,
    subscriberKey: 'enemail',
},

callsPerPage

  • A collection of boolean values determines which calls should be enabled or disabled according to the CALLS_CONFIG.conditions entry. Any calls marked as “true” will be executed upon each reload of the JavaScript library.

    • Note: the configuration for each call enabled here will be read from the corresponding callsToMake entry.

JS
callsPerPage: {
      info: true,
      idConnect: false,
      idConnectInfo: false,
      floodlight: false,
      track: true,
      facebook: false,
      idsync: false,
    },

API_INFO_URL

  • string value of pipeline path for Info Ident Track calls. This will be appended to API_HOST, e.g. /brand-demo-info/info.

API_INFO_URL_PARAMETERS

  • array of strings containing the FunnelConnect query string parameters. Valid entries are 'attributes', 'notifications', 'permissions', 'nbidentifiers' 'identifiers'. If there is any invalid entry, the library will log the name(s) in the browser’s console and exclude them, e.g. ['attributes', 'notifications', 'permissions', 'identifiers']. If the entry is not configured, all valid entries will be used.

API_TRACK_URL

  • string value of pipeline path for Track calls. This will be appended to API_HOST, e.g. /brand-demo-track/track.

API_SUBSCRIBE_URL

  • string value of pipeline path for Info Ident Track calls. This will be appended to API_HOST, e.g. /brand-demo-newsletter/v1/subscribe.

IDR

ident enables you to configure also the capture of lookup identifiers from a JWT token. It provides also a hashing function to hash PII before sending it in query string parameter.

JS
ident: [
  {
    customerId: {
      cookie: '[cookie name]',
      identifierName: '[identifier name captured from JWT value]',
    },
    customerKey: 'e10',    // Parameter to pass customer ID.
    },
  {
    customerId: {
      cookie: '[cookie name]',
      identifierName: '[identifier name captured from JWT value]',
      shouldHash: true,    // value is hashed using sha256
    },
    customerKey: 'e11',    // Parameter to pass hashed email.
    }
],
  • Multiple identifiers can be provided.

findCustomerId and CALLS_CONFIG constants can be configured to handle any customer identifier from local storage or data layer as part of the IDR.

JS
...
const findCustomerId = () =>
    window?.dataLayer?.[0].clientinfo?.clientcustomerid;
...
const CALLS_CONFIG = {
        callsPerPage: {
            info: {
                ident: [
                  {
                      customerId: findCustomerId(),
                      customerKey: 'customerId',
                  }
                ]
            }
        }

IDR_QUERY_PARAMETERS

  • array of strings is to be read from the URL and added to the Info Ident Track call payload, those values must exist in the URL as query string parameters. This can be used to pass a user identifier when redirected from/to a different website.

JS
IDR_QUERY_PARAMETERS: ["e10", "imi"],

Utiq

Defined via callsPerPage config within info object for Info Ident Track call. It gets the martechpass (mtid) via onIdsAvailable event listener.

JS
callsPerPage: {
    info: {
        utiq: {
            marTechPassMobileKey: 'mt1',
            marTechPassFixedKey: 'mt2',
        }
    }
}
  • marTechPassMobileKey defines the mobile connection martechpass.

  • marTechPassFixedKey defines the fixed (Wifi) connection martechpass.

Cookie Consent

cookieParams property allows reading cookies to be sent as URL encoded query string parameters with the Info Ident Track call. Two types of cookie values can be captured:

  • cookie_name specify the cookie you want to read and take the full value.

  • cookie_param specify the parameter within the cookie value you want to capture.

JS
//configuration for cookie value

cookieParams: [ 
  { 
    cookie_name: '[cookie name]'
  },
],

//configuration for specific parameter from cookie value

cookieParams: [ 
  { 
    cookie_name: '[cookie name]',
    cookie_param: '[specific parameter to be captured within cookie value]'
  },
],

CONSENT_COOKIE_CONFIG

  • object to enable the creation of a cookie used with cross-domain IDR via CDN (e.g. CloudFront, etc.) when consent is granted. The web SDK will only be loaded after cookie consent has been granted.

JSON
{
    enabled: true;
}

Data Storage

STORAGE_KEY

  • string: name of the key where the response of the Info Ident Track call will be stored, e.g. fcData.

STORAGE_TYPE

  • string value determines where is going to be stored the STORAGE_KEY. Default to sessionStorage, e.g. localStorage|sessionStorage.

Data Layer Data Capture

ROOT_VARIABLE

  • array of strings of the 3rd party dataLayers. Note, if known beforehand, you can also provide a specific nested key where the required SITE_VARIABLES are defined. Note: If the website has installed Google Tag Manager/ Google Analytics, the dataLayer name must be configured in GOOGLE_CONFIGURATION entry, e.g. ['utag', 'wpDataLayer'] using VARIABLES_DELIMITER: ['utag:data', 'wpDataLayer'].

VARIABLES_DELIMITER

  • string value used to navigate through the dataLayer object, e.g. ':'

rootVariablesRetryPeriod

  • number timeout value used to retry retrieving the source object for a path. Used alongside ROOT_VARIABLE and VARIABLES_DELIMITER, e.g. '500'.

SITE_VARIABLES

  • array of strings of the variable's name that is going to be tracked from the ROOT_VARIABLE, e.g. ['event_data', 'page_url', 'shortcode_identifier'].

INTERVAL_IN_MILLISECONDS

  • number time in milliseconds to check for events in the fcDataLayer.dataLayer’s queue and execute the track or info-track call. The default is 5000 ms.

TRACK_DATALAYER_VARIABLES

  • object containing the 3rd party dataLayers and a set of variables at a specific level. The results will contain the full object under the configured key and will be sent via post method in the Info Ident Track payload under a data key. If the configured variable name is not found under a specific level, the library will log to the browser console the variable name and level number, helping with the debugging.

JS
TRACK_DATALAYER_VARIABLES: {
    anyDataLayer1: {
        anyVariable1: [1, 2],
        anyVariable2: [3],
    },
    // note: for objects wrapped inside arrays, an extra level must be added
    anyDataLayer2: {
        anyVariable1: [2],
    },
},
  • Configuration example:

JS
TRACK_DATALAYER_VARIABLES: {
    dataLayer: {
        pageInfo: [1, 4, 2],
        productInfo: [2],
    },
}
  • Payload example:

JSON
{
  "data": [
      [
        {
            "pageInfo": {
                "pageName": "ar:pdp:9399640:argoshomeheathdonsingleendliftottomanbed-grey:",
                "siteSection": "ar:productdetails:",
                "categoryID": [
                    "29351",
                    "29366",
                    "29865",
                    "29867"
                ]
            }
        },
        {
            "pageInfo": {
                "visited": "true"
            }
        },
        {
            "productInfo": {
                "productID": "9399640",
                "productName": "Argos Home Heathdon Single End Lift Ottoman Bed - Grey"
            }
        },
      ]
  ]
}

Google Analytics

GOOGLE_CONFIGURATION

  • object to configure Google-related configuration

JS
GOOGLE_CONFIGURATION: {
    DISPATCH_DATALAYER_UPDATED_EVENT ? : boolean;
    EVENT_ATTRIBUTE_LIST ? : EventAttributeList;
    GOOGLE_DATALAYER_NAME: string;
    UMID_TO_DATALAYER_CONFIGURATION ? : {
      UMID_PUSH_EVENT_NAME?: string;
      UMID_KEY_NAME?: string;
    };
}

DISPATCH_DATALAYER_UPDATED_EVENT

  • boolean value used to attach a listener event to Google’s dataLayer defined in GOOGLE_DATALAYER_NAME entry, if set to true, a track or info-track call is triggered after every push event if any of the EVENT_ATTRIBUTE_LIST or SITE_VARIABLES are found in the new pushed data.

EVENT_ATTRIBUTE_LIST

  • object value in which each key is the event name to track and the value is an array with the event's attributes. This allows us to capture Google-recommended events. For more information on the list of configurable events check the following table: GA4 Events

JS
EVENT_ATTRIBUTE_LIST: {
    ...
    event_name: ['attribute1, attribute2,'....],
    ...
}

GOOGLE_DATALAYER_NAME

  • string value to define the name of Google’s dataLayer.

  • For configuration example please check here.

  • Payload example:

JSON
{
  "add_to_cart": {
    "currency": "EUR",
    "value": "45.50",
    "items": [
      {
        "item_category": "Fish",
        "item_id": "",
        "item_name": "TSARINE Caviar 50g",
        "coupon": "",
        "affiliation": "",
        "price": "45.50",
        "discount": 0,
        "quantity": 1
      }
    ]
  }
}

UMID_TO_DATALAYER_CONFIGURATION

  • object value to enable pushing the umid as an event into Google’s dataLayer. In case the umid changes due to identification, this change will be reflected in the dataLayer, allowing GTM calls to contain the latest umid value. This is useful when the umid is required to be used as a parameter of a GTM tag or as a main identifier for users in Google Analytics.

    • UMID_PUSH_EVENT_NAME string value to configure the event name. If not provided, umid_updated is used by default.

    • UMID_KEY_NAME string value to configure the key name under which the umid will be stored. If not provided, user_id is used by default.

  • Example:

CODE
UMID_TO_DATALAYER_CONFIGURATION: {
  UMID_PUSH_EVENT_NAME: 'umid_updated',
  UMID_KEY_NAME: 'user_id',
},
  • To integrate this feature with GTM:

    • Create a trigger of type Custom Event.

    • Use the same name configured in UMID_PUSH_EVENT_NAME as the event name.

    • Create a Data Layer variable using the name configured in UMID_KEY_NAME

    • In the desired Tag, add a new parameter and provide the desired name to be used in Google Analytics as a value of the previously created Data Layer variable.

Tracking Query Parameters

TRACKING_URL_QUERY_PARAMETERS

  • array of strings is to be read from the URL and added to fcDataLayer.dataLayer is to be sent as batches via track or info-track call and to localStorage’s fcData.attributes, those values must exist in the URL as query string parameters.

  • e.g. ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content']

IDConnect Cross-domain

IDCONNECT_MANUAL_ROUTING

  • boolean entry to enable setups with cross-domain calls

  • e.g. true

IDCONNECT_NEXT_BEST_DOMAIN

  • string of the hostname for the sub-domain, which will be used as a 3rd party domain for cross-domain calls

  • e.g. fc.yourdomain.com

IDCONNECT_DATA_STORAGE

  • string value defines the browser storage key name where data from FunnelConnect will be stored.

  • default value is set to “fcIdConnectData“.

IDCONNECT_STORAGE_TYPE

  • string value which defines the browser storage type will be used to create the IDCONNECT_DATA_STORAGE.

  • possible values are “sessionStorage“ and “localStorage“.

IDCONNECT_TYPE

  • string value which defines the idconnect use case that will be run.

  • default value is set to “crossdomain“.

IDCONNECT_ALLOW_TOKEN_DATA_CALL

  • boolean value defines whether the additional token call should be triggered in the flow.

  • default value is set to “false“.

IDCONNECT_ALLOW_TOKEN_DATA_CALL_COUNTER

  • integer value that defines the number of times the token call should be done.

  • default is set to “false“.

Popup Manager

POPUP_CONFIG

  • array of objects containing the configuration for the popups.

    • CAMPAIGN

      • string value is used to identify the campaign the user has been assigned to via FunnelManager.

    • CAMPAIGN_STORAGE

      • string prefix to store in configured browser storage whether the popup has been submitted or discarded

      • e.g. if accepted, the stored value will be popupCampaign__true if rejected popupCampaign__false

    • ENABLED

      • boolean value to enable/disable the popup

    • VERIFICATION_URL

      • string

    • ENCRYPTION_URL

      • string value of the URL endpoint to encrypt the email.

    • CONFIRMATION_URL

      • string value of the URL to which the user will be redirected. Once submitted the popUp, this value will be stored in the configured browser’s storage for later validation using the key CONFIRMATION_URL.

    • ENCRYPTED_EMAIL_KEY

      • string value of the key where the encrypted email will be stored, this key should be present as a query string parameter in the CONFIRMATION_URL. Once submitted the popUp, the value of this entry will be the key for the encrypted email in the configured browser’s storage for later validation.

JS
[
  {
      CAMPAIGN: 'email-1',
      CAMPAIGN_STORAGE: 'popupCampaign',
      ENABLED: true,
      VERIFICATION_URL: '',
      ENCRYPTION_URL: 'https://encryption-api.test.teavaro.systems/api/v1/encr/test1',
      CONFIRMATION_URL: 'https://www.brand-demo.com/thank-you/',
      EMAIL_VERIFICATION_URL_PARAMETERS: ['subemail', 'emailverify'],
      ENCRYPTED_EMAIL_KEY: 'xenemail',
  },
  {
      ...
  }
]

ID Sync / Matching

API_IDSYNC_URL

  • string value for the idSync service pipeline.

META_TAGS

  • array of string of meta tags to look in the website public variables.

FLOODLIGHT_ID

  • string value for the floodlight service identification.

  • default is set to “nectarFloodlight“.

API_FLOODLIGHT_PATH

  • array of string values defining the floodlight service pipelines.

API_FACEBOOK_URL

  • string value for the facebook service pipeline.

FACEBOOK_IFRAME_ID

  • string value defines the id of the iframe which loads the Facebook service.

FACEBOOK_ID

  • string value defines the Facebook service identification.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.