WPConsent gives you powerful control over which scripts and iframes load on your site, ensuring you can achieve full compliance. While WPConsent automatically handles many common services, you may have custom scripts (like tracking pixels or analytics) or iframes that need to be blocked until a user gives consent.

This guide will walk you through blocking a custom script or iframe. The process involves two main parts: first, creating a “service” for the script, and second, telling WPConsent exactly which script or iframe to block.

Part 1: Create a Service for Your Script

Before you can block a script, you need to assign it to a service. This helps your visitors understand what they are consenting to when they manage their preferences.

1. Go to your WordPress dashboard.
2. Navigate to WPConsent > Settings
3. You’ll see three tabs at the top, Go to the ‘Cookies’ tab.
4. Click the ‘Add A Service’ button.
5. In the form that appears, fill out the following details:
   • Category: Choose a category for your service. For tracking pixels or ads, Marketing is appropriate. For analytics tools, choose Statistics.
   • Name: Give your service a clear name that your visitors will recognize, for example, “Reddit Ads” or “GitHub”.
   • Description: Briefly explain the purpose of the service.
   • Service URL: Add a URL to the privacy policy of the service if you have one.
6. Click Save. That’s it! Your service is now ready.
7. Add Relevant Cookies (Required): After your service is created, it will appear in the list on the Cookies tab. For full transparency with your visitors, it’s a great idea to add any cookies that this service places on their browser. At least one cookie is required.
   • Find your new service in the list.
   • Click the Add A Cookie button.
   • Fill in the cookie’s information and save.

Part 2: Configure the Custom Script Blocker

With your service created, you can now tell WPConsent which script or iframe to associate with it.

1. Navigate to the ‘Advanced’ tab within WPConsent > Settings.
2. Scroll down to the Custom iFrame/Scripts box.
3. Click the ‘Add Custom iFrame/Script’ button.
4. A configuration form will pop up. Let’s fill it out together:
   • Category: Select the same category you chose for your service (e.g., Marketing).
   • Service: In the dropdown menu, pick the service you just created (e.g., “Reddit Ads”).
   • Type: Choose whether you are blocking a Script or an Iframe.
   • Script/Iframe Tag: Here, you’ll add a unique string or pattern that acts as a template for WPConsent to identify the code you want to block (e.g. www.redditstatic.com/ads/pixel.js). We’ll cover this in detail in the example below.
   • Script Keywords (Script): If the script includes JavaScript functions dependent on the main script, add those function names here in a comma-separated list (e.g., fbq for Facebook Pixel) to block them until consent is given.
   • Elements to block (iFrame): If the script modifies or targets specific HTML elements by ID or class, you can add those selectors here in a comma separated list (e.g., #my-chat-widget or .advertisement-banner) to hide them until consent is given.
5. Once you’ve filled in the details, click Save.

A Quick Note for Custom Iframes

For WPConsent to successfully block your custom iframes, you’ll need to make sure a couple of settings are enabled. No worries, it’s a quick check!

1. Navigate to the main WPConsent > Settings tab.
2. Scroll down to the Content Blocking section and ensure the main toggle switch is on.
3. Just below that, in the Content to Block list, find the service you created for your iframe (e.g., “Reddit Ads”) and make sure its toggle is also enabled.

Practical Example: Blocking a Reddit Pixel Script

Let’s walk through a real-world example. Imagine you’ve used a plugin like WPCode or added code to your theme for a Reddit pixel to track ad conversions. Here’s how you would block it with WPConsent.

Step 1: Identify the Original Script on Your Site

First, you need to find the full script that’s currently on your website. The Reddit pixel code looks something like this:

<script>
!function(w,d,s,l,e){w[l]=w[l]||[];w[l].push({'start': new Date().getTime(),event:'reddit.pixel.load'});
var f=d.getElementsByTagName(s)[0],j=d.createElement(s);
j.async=true;j.src='https://www.redditstatic.com/ads/pixel.js';
f.parentNode.insertBefore(j,f);}(window,document,'script','rdtDataLayer'); 
rdt('init', 'T2_randomRedditPixel77'); 
rdt('track', 'PageVisit'); 
</script>

Step 2: Create the Blocking Rule in WPConsent

To block this script, we just need to give WPConsent a unique piece of text to look for within that script. The most reliable identifier is usually part of the script’s source URL (the src). In this case, a unique identifier is:

www.redditstatic.com/ads/pixel.js.

Following the steps in Part 2 above, you would enter the following unique string into the Script/Iframe Tag field.

WPConsent will now automatically scan the code on your pages, find the larger Reddit script by matching this unique pattern, and prevent it from loading until the visitor consents to the Marketing category. This template approach ensures the script is blocked reliably, even if other parts of it change.

Troubleshooting

If you need to check if custom script blocking is working:

1. Ensure Automatic Script Blocking is on or consent for that category is not given.
2. Open your website in an incognito/private browsing window
3. Right-click and select “View Page Source”
4. Look for scripts with `type=”text/plain”` and `data-wpconsent-category` attributes – these are being properly blocked