How to manage scripts #

There are two ways to manage your scripts:

• via <script> tags
• via callbacks/events

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:

<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:

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

After:

<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:

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

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

Services #

You can define a service by adding the following attribute:

• data-service="your-service-name"

<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:

<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:

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).

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
                }
            }
        }
    }
})