How To Block First Party Ads On Your Browser

Internet users are becoming savvier and demanding of websites and having ads placed in their face is starting to become a deterrent for many. Add blocking behaviour has become extremely prevalent among higher LSM users who are willing to fork out for paid services that remove ads or have the know how to opt for ad blocking software or tools.

Browsers like Brave Browser have grown in popularity as internet privacy becomes a growing concern ever since the launch of GDPR. While ad blocking tools may stop third-party ad servers dead in their tracks and give you a better browsing experience overall, you cannot avoid ads that are part of platforms like Facebook, Twitter, Gmail and the like.

While first-party ads may be a bit more stubborn, it doesn't mean they cannot be hidden with a little workaround or two. If you have the patience and the know how you can start to browse sites like Facebook and avoid having to see ads again. Sound too good to be true? Well, let's explain. 

What are first party ads?

A First Party Ad Tech Platform is a complete, end-to-end advertising technology stack, with integrated data components, all of which are operating in the context of the advertiser's domain. This means that ads and content are loaded in the HTML of the page in the same way and cannot be distinguished from the third party ads, it also provides better page load performance and a wealth of data for the advertiser. 

What are third-party ads?

Third-party ad serving refers to a common online scenario in which a website operator or publisher presents content for users and the site also includes advertising delivered by another provider such as AdSense, Google Display Network and more.

How blocking first-party ads works

First party ads are built into the site and are rendered with the actual content of the page, which means it cannot be stopped by a simple blocking of scripts loading during the request of the page we've been powerless until now. Using Brave browser you can now specify certain HTML or CSS elements that you don't want to see when browsing a site. For example, if there is an HTML element in the page called div class.ad we can tell Brave browser to hide all instances of this element and theoretically remove ads from being seen.

How to block first-party ads

While Brave blocks 3rd party ads and other undesired content out of the box, you may still run into ads while browsing from time to time. Generally, these ads are the first party and it's easy to forget that Brave does not block 1st party ads by default as they tend to be safe/non-malicious.

However, in the case of Gmail, Facebook, and many other popular websites, this may not be desirable.

Using the Filter

Brave allows you to remove individual elements on the screen by way of a built-in "cosmetic CSS filter".

To use the filter:

1. Right-click on an Element on the page
2. Select the LOGO.png icon from the context menu —> Block Element via Selector  
3. Ensure the correct element is displayed in the input form and click "Ok"

Below is an example of the filter in action on the website reddit.com:

After selecting Block element via CSS selector the pop-up box displays a text box containing the element detected in the area you initially right-clicked. In this example, the content was .infobar, wrapped inside div.contents. The filter is designed to work on any page element, not just images.

Isolating Elements

In the next example, the filter is used to block the download button on the page. The page is then reloaded to show that these filters will remain in place until the Clear CSS rules for this site option is selected:

Notice that the element in the box is much longer this time. This is because the button element is nested inside several containers. Each container is delimited by the chevron symbol (>):

1. .et_pb_fullwidth_header_1
2. .et_pb_fullwidth_header_container
3. .header-content-container
4. .header-content
5. .et_pb_button_one (this is the element we're actually blocking)

Nested Elements

Containers become relevant when trying to block an element that's been nested inside many other containers. The filter's detection will not always find the desired element name if there are too many layers surrounding it.

Luckily, the built-in Developer Tools can do a lot of this work for you:

• Open Developer Tools and click the Inspector icon
• Now when hovering over/clicking on a page element, the code window will highlight the block of code where the element is placed
• From here, find the starting tag for the container which holds the desired element
• If unclear, use the Properties tab in the Developer Tools window to confirm the name (top-most option)

Tell us your advertising story

Are you sick and tired of seeing ads while browsing the web? Do you just not even notice them anymore? Would you like it if there were more ad-free options online? Do you have any ad blocking tips for us? Let us know in the comments below.

Contact us

If you want to know more about website tracking for your business, then don’t be shy we’re happy to assist. Simply contact us

Are you looking to promote your business?

Business owners can create your free business listing on nichemarket. The more information you provide about your business, the easier it will be for your customers to find you online. Registering with nichemarket is easy; all you will need to do is head over to our sign up form and follow the instructions.

If you require a more detailed guide on how to create your profile or your listing, then we highly recommend you check out the following articles. 

• How to create a nichemarketer profile 
• How to create a nichemarket business listing 

Recommended reading

If you're looking for alternative ways to monetise your site then we recommend you check out the following posts

• How To Earn Cryptocurrency Using Your WordPress Site
• How To Turn Your Blog Into A Business

Tags: ad blocker