Integrations: Script Center, Plugins & Services

Get compliant today in the European Union, United States, Canada, United Kingdom, Australia, Brazil & South Africa with the only Privacy Suite for WordPress that offers a fully-featured plugin for Worldwide Compliance.

Table of Contents

The script center is now embedded in “Integrations”, an expansion of the functionalities and flexibility in integrating plugins, services and disabling/enabling specific content elements.

1. Enabling and disabling Services

The current list are services that are integrated with Complianz and appear during the configuration in the wizard. Mostly for testing purposes, you can now disable/enable the blocking of these services by Complianz.

We have added placeholders for most services, e.g. and Instagram, which can be changed if needed. To know more, please read this article. If you want to add a service, please refer to 3.0 of this article.

Important if you’re using the US region only, or in combination with other regions. Enabling services to be blocked will work on the opt-out principle, and will be forced when the user has revoked consent on the Cookie Policy or DNSMPI page.

2. Integrated plugins

Complianz will scan your plugins to see if any match our integrated plugin list. These, like Monsterinsights for Google Analytics, are popular plugins that need a specific configuration to comply with privacy laws. Not all plugins need to be configured or integrated. If you’re certain a plugin needs configuration or you want to request integrating this with Complianz, please keep reading!

2.1 Adding plugins

If you want to integrate a plugin, you can either request integration (scroll down to 2.3) or add the plugin’s script to the script center. See 3.0 on how to add scripts.

2.2 Plugin developers

For plugin developers who would like to integrate their plugin with Complianz we wrote an article on how to use Complianz consent status and cookies to integrate their plugin functionalities and comply with privacy laws. If help is needed from our end, please let us know!

2.3 Requesting plugin integrations

Requesting plugin integrations is simple, please log a support ticket with the subject: “Plugin Integrations” and complete the form. We will contact you if anything is unclear.

3. About the Script Center

The script center can be used if service and plugin integrations are not covering all your needs. You can create your own integration with the script center, or use the developer’s guide if needed.

We will give 3 examples for the 3 main possibilities to use the script center and explain the features. Some are more advanced than others. Asking for help is always allowed!

3.1 Add a Third-Party Script

For this example, we will add a Facebook Pixel script to the script center. It will be added, and controlled by Complianz. You don’t need to use another plugin, or add the pixel yourself. If you want to use a plugin, or add it yourself. Keep reading!

3.1.1 Name

This is a simple one, use a name so you can easily find the service in the script center.

3.1.2 The Script

Add the script you want to add and controlled to the script center, but DO NOT use the <script&gt tags, both opening and closing tags. For example;

3.1.3 Category

Trigger on the needed, official, category.

3.1.3 Placeholder

You can add a placeholder to your script if needed, this is only available before consent. For this example, we will nog add a placeholder, as the script has no front-end visual. Below, when blocking a script we will explain how to add a placeholder.

3.2 Block a script, iframe or plugin

Here you can block a script, block a URL or an iFrame. We will also explain how to use placeholders and dependencies.

3.2.1 Name

This is a simple one, use a name so you can easily find the service in the script center.

3.2.2 URL or Script that should be blocked before consent

We will again use the Facebook Pixel as an example. You can block scripts based on the URL it triggers, or a unique function in the script itself. If you block the script with a a term or URL that is too broad, you might block other scripts as well. What you can block from the Facebook script:

				
					console.log( 'What to block' );

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
// Unique URL, connect.facebook.net, you can block
'https://connect.facebook.net/en_US/fbevents.js');
// Unique URL, connect.facebook.net, you can block
fbq('init', 'your-id');
// 'fbq' can be triggered to block this script
fbq('track', 'PageView');
// 'fbq' can be triggered to block this script
				
			

3.2.2 iFrame that should be blocked before consent

But what if it’s an Iframe? Like a Facebook Post. And how to add a placeholder, while the content is blocked.

				
					console.log( 'Facebook Embed' );

// The URL to Block 'facebook.com/plugins/'
<iframe src="https://www.facebook.com/plugins/post.php?href
// The URL to Block 'facebook.com/plugins/'
=https%3A%2F%2Fwww.faceboo.com%2Fteerling
.keurslager%2Fposts%2F107930530597971
7&show_text=false&width=500" width
="500" height="498" style="border
:none;overflow:hidden" scrolling
="no" frameborder="0" 
allowfullscreen
="true" allow="autoplay; clipboard
-write; encrypted-media; picture-in
-picture; web-share"></iframe>
				
			

Because this is an iFrame you can select. a placeholder and you’re done. What if it’s not an iFrame?

3.2.3 Add a Placeholder

Besides picking your placeholder, you can do even more with our placeholders. You need to pick the HTML element where we need to set the placeholder. This can be done by looking at your page source and finding the correct class to overlay the placeholder.  You can find the example below where we find the CSS class of the HTML element wrapping your widget or script that needs to be blocked.

				
					console.log( 'Finding your CSS Class' );

// class="calendly-inline-widget"
<div class="calendly-inline-widget"
// class="calendly-inline-widget"

style="min-width:320px;height:580px
;" data-auto-load="false">
<script type="text/javascript" src
="https://assets.calendly.com/assets
/external/widget.js"></script>
<script>
Calendly.initInlineWidget({
url: 'https://calendly.com/YOURLINK'
});
</script>
</div>

				
			

For the above widget you find the class “calendly-inline-widget”. This is where the placeholder should appear before consent. There are of course less obvious classes or HTML elements that are endlessly wrapped in div classes. Fail, until you’re done!

!IMPORTANT If you added this widget yourself, you can wrap it yourself as well, for example:

				
					console.log( 'Add your CSS Class' );

// Add your own!
<div class="my-css-class">
// Add your own!

<div class="calendly-inline-widget"
style="min-width:320px;height:580px
;" data-auto-load="false">
<script type="text/javascript" src
="https://assets.calendly.com/assets
/external/widget.js"></script>
<script>
Calendly.initInlineWidget({
url: 'https://calendly.com/YOURLINK'
});
</script>
</div>
// Add your own!
</div>
// Add your own!


				
			

3.3 Whitelist a script, iframe or plugin

Using the snippet above, instead of blocking the script you found in your pagesource, you can use a unique URL or identifier to whitelist and unblock your script.

 

				
					console.log( 'Whitelist this Script' );

<div class="calendly-inline-widget"
style="min-width:320px;height:580px
;" data-auto-load="false">
<script type="text/javascript" src
="https://assets.calendly.com/assets
/external/widget.js"></script>
<script>
Calendly.initInlineWidget({
// Whitelist calendly.com
url: 'https://calendly.com/YOURLINK'
// Whitelist calendly.com

});
</script>
</div>



				
			

Recent articles

Integration with Woodmart Google Maps

An integration with the WoodMart theme is available as an MU Plugin on GitHub: https://github.com/Really-Simple-Plugins/complianz-integrations/blob/master/woodmart-custom-google-maps.php

Read More »

Download

You can also directly download the demo container with triggers and variables/ Please make sure you know how to import a container.

Menu

Google Consent Mode

You can now enable Google Consent Mode for Tag Manager. How it works, and what you need to configure can be found here.

Client Demo

We have a client demo where we have prepared custom events and the most common tags. If you want access for inspiration, please contact support. You will need a Google Account to get access.

Other articles

Join our mailing list - 8 Tips & Tricks in your inbox over the next 8 weeks!