CNN.com advertises Google Play app to Ubuntu users

While the idea of a custom style sheet that hides all blocks that point to market:// URLs sounds good, unfortunately in this specific instance it wouldn’t work as the banner is dynamically generated, and the link doesn’t have a href attribute, instead a very obfuscated onclick handler is installed on the link, meaning it would be very complex to detect the final target of the link.

There are two options here:
 1) Evangelize CNN to teach them to recognize our default UA
 2) Devise a custom UA override for cnn.com that won’t get us the banner

I unmarked this bug as being a duplicate of bug #1328183.

Bug #1328183 is too generic, specific bug reports for individual issues are a better way of tracking them.

Some more information on this specific case: cnn.com’s main page has some code like this:

if (window.device.isAndroid) {
    $( '.android-link' ).removeClass('hide');
}

where window.device.isAndroid is true whenever the lowercased user-agent string matches /android/.
So unless we remove the android token from the UA, we will always get the banner.

Note that removing the android token from the UA (with a UA override rule) gets us redirected to cnnmobile.com, which seems to have issue displaying some images.

Another interesting data point: cnn.com seems to be using the jQuery smartbanner plugin (http://jasny.github.io/jquery.smartbanner/) to display the app banner (see http://z.cdn.turner.com/cnn/tmpl_asset/static/mobile_phone/4009/js/global-min.js).

The generated div looks like this:

    <div id="smartbanner" class="android shown">…</div>

So presumably, a userscript that detects such a div and remove the "shown" class from it would achieve hiding all smart app banners based on this jQuery plugin (to be tested).

It appears simply removing the "shown" class on the div doesn’t actually hide it.

The following two alternatives work better:

    document.getElementById("smartbanner").style.display = "none";

    var smartbanner = document.getElementById("smartbanner");
    smartbanner.parentNode.removeChild(smartbanner);

Unfortunately neither of them frees up the space that was taken up by the banner, which leaves a blank space at the top of the page.

The linked branch has a user script that hides and removes the smart banners generated by the smartbanner jQuery plugin.

The only gotcha with the current implementation is that it doesn’t actually prevent the banner from being instantiated and inserted in the DOM in the first place, it merely hides it, but it cannot prevent the original slide-in animation from starting, which results in the contents of the page briefly sliding down then up again, which doesn’t look too nice.

My recommendation is to use the same system used by smartbanner.js which uses a cookie to detect if the use has already clicked on the close button so the banner will only show up just after X days.

https://github.com/jasny/jquery.smartbanner/blob/master/jquery.smartbanner.js#L177
https://github.com/jasny/jquery.smartbanner/blob/master/jquery.smartbanner.js#L190

if we can create the "sb-closed" cookie before smartbanner code is exectued the banner will never show up

i would use something like :

var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
    x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
    y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
    x = x.replace(/^\s+|\s+$/g, "");
    if (x == 'sb-closed') {
        if (!decodeURI(y)) {
            var exdate = new Date();
            var exdays = 1826; // 1826days ~ 5 years
            exdate.setDate(exdate.getDate() + exdays);
            value = encodeURI('true') + ((exdays == null) ? '' : '; expires=' + exdate.toUTCString())
            document.cookie = 'sb-closed=' + value + ' path=/;'
        }
    }
}

This bug was fixed in the package webbrowser-app - 0.23+14.10.20140630.1-0ubuntu1

---------------
webbrowser-app (0.23+14.10.20140630.1-0ubuntu1) utopic; urgency=low

  [ Olivier Tilloy ]
  * Add a user script that prevents so-called "smart banners" generated
    by the smartbanner jQuery plugin to show ads for native android/iOS
    apps. (LP: #1329799)
  * Add support for custom search engines defined by the OpenSearch
    description document format
    (http://www.opensearch.org/Specifications/OpenSearch/1.1). (LP:
    #1277637)
 -- Ubuntu daily release <email address hidden> Mon, 30 Jun 2014 20:47:27 +0000