Tag a script with type="text/plain" and data-cookie-consent, and TermsFeed Free Cookie Consent runs an optional script only after the visitor accepts its category, in its default express mode. The browser does not run a text/plain script, so the script waits in the page. Cookie Consent turns the tagged script into a normal script the moment its category is accepted, by default with no page reload. Scripts tagged strictly-necessary run on every page load without an answer, as do scripts in the categories that run before the answer under implied consent or page_load_consent_levels.

Tagging takes 5 steps and about 10 minutes for a site with a handful of scripts. A script you leave untagged runs on every page load, whatever the visitor answers.

What tagging changes in a script tag

Tagging sets type and adds data-cookie-consent, and the script keeps its code and its other attributes. The Google Analytics 4 tag is 2 scripts, an external one and an inline one, and looks like this before tagging.

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

The same 2 scripts read like this after tagging with the tracking category.

<script type="text/plain" data-cookie-consent="tracking" async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script type="text/plain" data-cookie-consent="tracking">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Step 1: Find the scripts that need a tag

Every script that sets a cookie, stores data in the browser, or sends data to another company needs a tag, unless your site fails without it. A Google tag in advanced consent mode, and a vendor whose recipe sends a consent command, run untagged by design. Your template holds most of the scripts that need a tag, but plugins, apps, and platform settings add others, so look in each of these places.

  1. The page source. Open your page, view its source, and search for <script to list every script tag in the HTML.
  2. The Network tab. Close every private window and open a new one. Open DevTools, select the Network tab, type -domain:example.com in the filter box with your own hostname, and then load your site. The list shows every request to another host.
  3. The Application tab. In the same private window, select Cookies and your site before you answer the consent banner. Apart from the Cookie Consent cookies and the cookies of your own login or cart, every other cookie comes from a script that needs a tag, or from your server.
  4. Your platform and your tag manager. A platform integration or a tag manager adds scripts the template does not show, so check both for them.

A script a platform injects for you has no tag to edit. Move that script out of the platform settings with the guide in Install a Cookie Banner on Any Website. Cookie Consent releases the snippet of a tag manager as one script, and the tag manager then runs the tags it holds by its own triggers. The optional categories are separate switches, so a container tagged targeting runs any tracking tags inside it for a visitor who accepts targeting alone. Keep the tags of one category in each container, and tag the snippet of that container with its category.

Step 2: Choose the category for each script

Pick 1 of the 4 categories for each script: strictly-necessary, functionality, tracking, or targeting. Analytics tools such as Google Analytics 4 and Microsoft Clarity go into tracking. Advertising pixels such as the Meta Pixel, Google Ads, and the LinkedIn Insight Tag go into targeting.

Write the ID exactly, in lowercase, because Tracking or analytics never matches and the script never runs. Decide the category for each kind of script with The 4 Cookie Categories.

Step 3: Tag an inline script

Add type="text/plain" and data-cookie-consent to the opening <script> tag of the inline script, and leave its code as it is. Replace any type the tag already has, such as type="text/javascript".

<script type="text/plain" data-cookie-consent="functionality">
  // the code of the widget, unchanged
  console.log('This line runs only after the visitor accepts functionality.');
</script>

Tag scripts in the generator instead of by hand, if you prefer. The generator adds type="text/plain" and data-cookie-consent to every <script> tag in the pasted code and puts the result into the generated code.

  1. In the optional "Add your JavaScript scripts" step at termsfeed.com/cookie-consent, enter a name and select the category of the script in the "Type" field.
  2. Paste the code into the "Code" field, and click the "Add this script" button.
  3. Replace the Cookie Consent code on your site with the new generated code, and remove the untagged copy of the script from your site.

Step 4: Tag an external script

Tag a script with a src attribute the same way, and keep async, defer, id, integrity, crossorigin, and every data-* attribute. Cookie Consent copies every attribute to the script it runs except type, data-cookie-consent, nonce, and data-nonce, and gives the released script the value of nonce or data-nonce as its nonce.

<script type="text/plain" data-cookie-consent="targeting" async src="https://example.com/ads.js"></script>

Tagged scripts of one category run in the order they appear in the page, and Cookie Consent adds each one to the end of <head> when it runs. An external script without async holds the scripts after it in its category until it loads, fails, or 10 seconds pass. Put a library above the inline code that uses it, in the same category, and leave out async on the library tag, so the inline code runs after the library loads.

On a site with a nonce-based Content Security Policy, write the page nonce on each tagged script as nonce or data-nonce. Cookie Consent never applies the page nonce to a tagged script without one. Read every attribute rule in Attributes of a Cookie Consent Tagged Script, and set up the policy with Content Security Policy (CSP).

In express consent with page_load_consent_levels at its default, confirm that each optional tagged script waits until you accept its category, with debug on. Add "debug": true to the object you pass to cookieconsent.run(), publish the change, and remove it before launch.

Then run the check in Chrome, starting in the Console tab.

  1. Close every private window, open a new one, open DevTools, and select the Console tab.
  2. Load your site, and find one line JavaScript script with valid data-cookie-consent tag found, but not loaded yet for each tagged script, followed by its category.
  3. Confirm that no warning reads Invalid cookie-consent tag level for JavaScript script, which marks a tag with an empty or misspelled category that never runs.
  4. Select the Network tab, type the host of an optional tagged script in the filter box, such as google-analytics.com, and confirm that no request appears.
  5. Click the "I agree" button, and confirm that the requests appear and that the Elements tab shows the script in <head> with an initial-data-cookie-consent attribute.

A type="text/plain" script without a data-cookie-consent attribute logs nothing, because Cookie Consent ignores it. Check every tag for the attribute when a script never runs and the console stays silent. Run the full installation checks with Check That Your Cookie Banner Works.

Tagging holds only <script> elements that are in the page when Cookie Consent starts, and Cookie Consent runs each one as a classic script. A module script you tag loses its type, so a module that uses import or export fails. An iframe, image, or tracking pixel is never held and loads at once. Hold an embed behind a placeholder with Block Embeds and Iframes Until Consent.

A tagged script your code adds after cookieconsent.run() starts never runs, because Cookie Consent reads the tagged scripts once. Load the scripts that a single-page app adds on a later route from a callback, with the pattern in Single-Page Apps and Frameworks.

A tagged script that already ran keeps running on the page where the visitor withdraws consent. It stops from the next page load, and the cookies it set stay in the browser. To stop the script at once, have Cookie Consent reload the page after each answer with Reload the Page After Consent.