Skip to content
On this page

How to manage scripts

There are two ways to manage your scripts:

Available script attributes

  • data-category: name of the category
  • data-service (optional): if specified, a toggle will be generated in the preferencesModal
  • data-type (optional): custom type (e.g. "module")
  • data-src (optional): can be used instead of src to avooid validation issues

Example usage:

html
<script
    type="text/plain"
    data-category="analytics"
    data-service="Google Analytics"
>/*...code*/</script>

How to block/manage a script tag

You can manage any script tag. by adding the following 2 attributes (both required):

  • type="text/plain"
  • data-category="your-category-name"

Before:

html
<!-- E.g. enable this script only if analytics category is accepted -->
<script>
    // Script enabled
</script>

After:

html
<script type="text/plain" data-category="analytics">
    // Analytics category enabled
</script>

You can also run scripts when a category is disabled (if it was previously enabled) by prepending the '!' character to the category name:

html
<script type="text/plain" data-category="!analytics">
    // Analytics category disabled
</script>

type="module"

When a script tag is enabled, the type attribute is removed by default. To keep the type="module" attribute you must specify data-type="module".

html
<script
    type="text/plain"
    src="my-service-module.js"
    data-category="analytics"
    data-service="My service"
    data-type="module"
></script>

Services

What is a service

A service represents a script — or a group of scripts — associated to a name, that appears inside the Preferences Modal with its own toggle. You can also configure a service internally via the configuration object.

You can define a service by adding the following attribute:

  • data-service="your-service-name"
html
<script type="text/plain" data-category="analytics" data-service="Google Analytics">
    // Google Analytics enabled
</script>

You can add the '!' before the service name to run some clean-up logic when the service is disabled:

html
<script type="text/plain" data-category="analytics" data-service="!Google Analytics">
    // Google Analytics disabled
</script>

Using callbacks/events

You can adapt the above examples for use inside the onConsent callback:

javascript
cc.run({
    onConsent: function(){
        if(cc.acceptedCategory('analytics')){
            // Analytics category enabled
        }

        if(cc.acceptedService('Google Analytics', 'analytics')){
            // Google Analytics enabled
        }
    }
});

Another handy callback is the onChange callback, fired when the state of the categories or services is changed (assuming that consent was already expressed).

javascript
cc.run({
    onChange: function({changedCategories, changedServices}){
        if(changedCategories.includes('analytics')){

            if(cc.acceptedCategory('analytics')){
                // Analytics category was just enabled
            }else{
                // Analytics category was just disabled
            }

            if(changedServices['analytics'].includes('Google Analytics')){
                if(cc.acceptedService('Google Analytics', 'analytics')){
                    // Google Analytics was just enabled
                }else{
                    // Google Analytics was just disabled
                }
            }
        }
    }
})

INFO

A <script> tag can be enabled and disabled at most once, unlike the onChange callback — or its equivalent event listener — which can be executed multiple times.

Released under the MIT License.