CODEWITHSUNDEEP
javascriptc#asp.net
ihimv
ihimv

Reputation: 1494

Block Google ads on localhost while in development mode

I frequently have to update and test my small websites on my local machine. The websites use google ads.

I used to manually disable and enable the ads on each and every page and this is very painful.

I want to disable all the google ads while I am testing the website on my local machine. How do I achieve this?

Upvotes: 2

Views: 1958

Answers (4)

ihimv
ihimv

Reputation: 1494

After a few struggles, I found a basic solution to block all ads on localhost. The only limitation is that this has to be placed in masterfile and all the files inheriting the master file will have ads blocked.

Paste the below script in your master file in head section before including any other scripts.

    <script type="text/javascript">
        //block google ads on localhost
        if (window.location.hostname === "localhost") {
            window.adsbygoogle = {
                enabled: true,
                loaded: true,
                push: function () {
                    return;
                },
                google_ad_client: "",
                enable_page_level_ads: true
            }
        }
    </script>

Upvotes: 4

Ayyash
Ayyash

Reputation: 4409

There are two ways, you can develop your own Chrome extension that runs only on your chrome to hide Google Ads (which by the way have unique set of HTML so it is easy to pin point them and remove them).

Or you can make a link to a javascript file in the main template, that is always empty on the server (production), but locally it defines the css for Google Ads to be hidden. Again, Google Ads selectors are not so hard to pin point.

https://developer.chrome.com/extensions/getstarted

Here is a plnkr code for that purpose

manifest.json

http://plnkr.co/edit/wPxuO0vndIBMTz1ajMyJ?p=preview
{
  "name": "Walnut",
  "description": "hide ads",
  "version": "2.0",

 "content_scripts": [
    {
      "matches": ["https://*.facebook.com/*","http://localhost:8080/*"],
        "css": [ "remove.css" ],
        "js": ["remove.js"],
      "run_at": "document_start"
    }
  ],
  "manifest_version": 2
}

remove.js

// you can also make the removal periodical in case the Ad provider keeps recreating itself
// here you can have more freedon to find elements that main contain certain part of a class name or id
document.addEventListener('DOMContentLoaded', function () {

    var all = document.getElementsByTagName("*");

    for (var i=0, max=all.length; i < max; i++) {
      // check id and hide if it matches google-ad-*
    }
    setTimeout(function () {
        var ads = document.getElementsByClassName("example-suspected-class");


        if (ads.length == 1) {

            ads[0].remove();
        }
    }, 100);

    setInterval(function () {
        var ads = document.getElementsByClassName("example-suspected-class");

        if (ads.length == 1) {

            ads[0].remove();
        }
    },10000);


});

remove.css

/* setup any css you susspect would mean something to web page, examples */
#slot_TL1 {display: none!important;}
.vp-off .mb-list-ad {display: none!important;}
.vp-off .mb-list-ad * {display: none!important;}

http://plnkr.co/edit/wPxuO0vndIBMTz1ajMyJ?p=preview

Upvotes: 1

Kristi Jorgji
Kristi Jorgji

Reputation: 1739

You can use adblocker enable it when you work on localhost and then disable it when you publish your site.

Upvotes: 1

Bogoljub
Bogoljub

Reputation: 73

How about you have a flag in the config file where you can set a value to it when you are developing/testing locally.

Upvotes: 0

Related Questions