Vendor by Consents Loader

Set of utilities to load vendors scripts according to user consents.

You only need to define purposes and specialFeatureOptins as they're the only configurable consents on the tfc.

🔴 IMPORTANT: Before following the README, be sure you're loading the Stub from Boros TCF as it's required.

Loading list of vendors

import {
  initVendorConsentsLoader,
  addVendorLoadedEventListener
} from '@adv-ui/vendor-by-consents-loader'

const OPTIMIZELY_KEY = 'optimizely'

initVendorConsentsLoader({
  vendors: {
    tealium: {
      script: 'https://frtassets.fotocasa.es/external-scripts/utag-pro.js',
      consents: {
        purposes: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        specialFeatureOptins: [1]
      }
    },
    [OPTIMIZELY_KEY]: {
      script: 'https://frtassets.fotocasa.es/external-scripts/optimizely.js',
      consents: {
        purposes: [1, 2]
      }
    }
  }
})

addVendorLoadedEventListener(({vendor}) => {
  vendor === OPTIMIZELY_KEY && console.log('Optimizely has been loaded')
})

Loading a single vendor

In some cases you might want to load a single vendor later in your code:

import {
  loadSingleVendorByConsent,
  addVendorLoadedEventListener
} from '@adv-ui/vendor-by-consents-loader'

const GOOGLE_ADSENSE_KEY = 'google_adsense'

loadSingleVendorByConsent({
  name: GOOGLE_ADSENSE_KEY,
  script: 'https://google.com/ads.js',
  consents: {
    purposes: [5, 6]
  }
})

addVendorLoadedEventListener(({vendor}) => {
  vendor === GOOGLE_ADSENSE_KEY && console.log('Google has been loaded')
})

You can also set a vendor configuration without an specific script in case the vendor doesn't require it to work:

import {
  loadSingleVendorByConsent,
  addVendorLoadedEventListener
} from '@adv-ui/vendor-by-consents-loader'

const RTB_HOUSE_KEY = 'rtb_house'

loadSingleVendorByConsent({
  name: RTB_HOUSE_KEY,
  consents: {
    purposes: [2, 6]
  }
})

addVendorLoadedEventListener(({vendor}) => {
  vendor === RTB_HOUSE_KEY && console.log('RTB House is ready')
})

Loading specific vendors

Some vendors are used across all Adevinta Spain products and, for sake of convenience, they've their own script to load them.

Comscore

import {
  addVendorLoadedEventListener,
  loadComscore
} from '@adv-ui/vendor-by-consents-loader'

loadComscore({comscoreClientId: '7109919'})

addVendorLoadedEventListener(({vendor}) => {
  vendor === 'comscore' && console.log('Comscore has been loaded')
})

Using it in Monolithic apps

// First load the UMD module.
<script src="https://unpkg.com/@adv-ui/vendor-by-consents-loader/umd/index.js"></script>
<script>
  // load comscore
  window.sui.vendors.loadComscore({comscoreClientId: '7109919'})
  // init vendors loader by consents
  window.sui.vendors.initVendorConsentsLoader({
    vendors: {
      tealium: {
        script: 'https://frtassets.fotocasa.es/external-scripts/utag-pro.js',
        consents: {
          purposes: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          specialFeatureOptins: [1]
        }
      }
    }
  })
  // load a single vendor by consents
  window.sui.vendors.loadSingleVendorByConsent({
    name: 'google_adsense',
    script: 'https://google.com/ads.js',
    consents: {
      purposes: [5, 6]
    }
  })
  // add evento for listening comscore load
  window.sui.vendors.addVendorLoadedEventListener(({vendor}) => {
    vendor === 'comscore' && console.log('Comscore has been loaded')
    vendor === 'tealium' && window._utag.init()
    vendor === 'google_adsense' && window.gads.startAds()
  })
  //
</script>

List of Purposes

Purposes:

• 1 - Store and/or access information on a device
• 2 - Select basic ads
• 3 - Create a personalised ads profile
• 4 - Select personalised ads
• 5 - Create a personalised content profile
• 6 - Select personalised content
• 7 - Measure ad performance
• 8 - Measure content performance
• 9 - Apply market research to generate audience insights
• 10 - Develop and improve products

Special Purposes

• SP1 - Ensure security, prevent fraud, and debug
• SP2 - Technically deliver ads or content

Features

• F1 - Match and combine offline data sources
• F2 - Link different devices
• F3 - Receive and use automatically-sent device characteristics for identification

Special Features

• SF1 - Use precise geolocation data
• SF2 - Actively scan device characteristics for identification