How to use the data-sypher attribute to control script execution based on consent

by Sypher | Published in Resources


As part of our Sypher Cookie Consent Management Platform, we've introduced a powerful and flexible way to control when scripts are executed based on a user's consent: the data-sypher HTML attribute. This method enables you to defer script execution until the user has explicitly consented to a specific category, such as analytics or marketing.


What is data-sypher?

The data-sypher attribute is a custom HTML attribute you can add to <script> tags to indicate the category of consent they require. Instead of executing immediately when the page loads, these scripts are automatically blocked by Sypher and only executed after the user has granted consent for the corresponding category.

Sypher also supports the data-cookieconsent attribute, so you can use either format in your HTML.


Supported values

Your scripts can use one of the following values for consent categories:

  • functional
  • performance
  • marketing
  • analytics
  • other
  • Up to five custom categories: cc_1, cc_2, cc_3, cc_4, cc_5

The functional category is typically whitelisted and considered always allowed.


How Script Blocking Works

Sypher automatically scans your page for <script> tags with either the data-sypher or data-cookieconsent attribute. If a script’s category has not yet been consented to by the user, the script is blocked from running.

There is no need for you to call any manual JavaScript methods to block or unblock scripts. Everything is handled by the platform's JavaScript engine automatically after the user's consent is registered.


Examples

1. Inline Script

<script data-sypher="analytics">
  console.log('Analytics tracking code.');
</script>

This script will run only after the user consents to analytics cookies.

2. Remote Script

<script data-sypher="marketing" src="https://example.com/ads.js" async></script>

This external marketing script will be loaded and executed only after marketing consent is granted.

You can also use the data-cookieconsent attribute instead:

<script data-cookieconsent="performance" src="https://example.com/perf.js" defer></script>

Dynamic Scripts

If your application dynamically injects scripts (e.g., via JavaScript or a tag manager), Sypher’s monitoring will still detect and block them appropriately until the relevant consent is given.


Best Practices

  • Tag all your scripts with the appropriate category using either data-sypher or data-cookieconsent.

  • For third-party integrations (e.g., analytics, ads, tracking tools), make sure their scripts are wrapped with the right attribute.

  • Avoid relying on inline JavaScript without consent gating, especially for marketing or analytics functions.


Need Help?

Our support team is here to assist you with setting up or auditing your cookie consent script controls. Reach out any time via your Sypher dashboard or support portal.


By using the data-sypher or data-cookieconsent attribute, you gain fine-grained control over how and when scripts are executed, ensuring full compliance with privacy regulations like GDPR and ePrivacy, while maintaining performance and flexibility for your web application.