The most fundamental way of blocking problematic scripts from running is to deliberately malform the script tag with Metomic attributes. The two attributes you’ll need to add are:
any valid micropolicy
<script type="text/x-metomic" data-micropolicy="MY-POLICY-SLUG"> /** This code only runs when consent for MY-POLICY-SLUG has been given **/ console.log("ok") </script>
<script src="http://third-party.com/someScriptThatUsesCookies.js" type="text/x-metomic" data-micropolicy="MY-POLICY-SLUG" > </script>
You can also prevent any html element (e.g. images, iframes, embeds etc) from being parsed and rendered by wrapping them in such a script tag:
<script type="text/x-metomic" data-micropolicy="MY-POLICY-SLUG" > <!-- this embed won't be loaded or rendered until consent for MY-POLICY-SLUG has been given --> <iframe src="http://third-party.com/embedded-content"></iframe> </script>
The above technique relies on the content being HTML. If you are wrapping plain text, you will need to either wrap the text in an element, or begin the block with an html comment.
Be careful not to nest
<script> tags inside each other, or the first closing tag will close the entire block:
<script type="text/x-metomic" data-micropolicy="MY-POLICY-SLUG" > <!-- This next line will be read as the `text` property of the opening script and thus will not load the third party script --> <script src="http://third-party.com/embedded-content.js"> <!-- However, this closing tag will close the entire block --> </script> <p> This content will be rendered since the closing script tag already closed the entire block. </p> </script>
Blocking scripts manually is always an available option - but to help make things easier, Metomic can do the work for you with Autoblocking.
Updated about a year ago
Once you've learned how Autoblocking can help you, check out how Placeholders give your users a meaningful way of unblocking content: