+ - 0:00:00
Notes for current slide
Notes for next slide

Co-existing with
ad blockers

@CASCADE BOS meetup | Tue., June 28, 2016

Daigo Fujiwara, Web Developer, WBUR, http://wbur.org

@DaigoFuji

1 / 35

Do you like
Online Ads?

2 / 35

How about MONEY?

3 / 35

According to IAB (Interactive Advertising Bureau) U.S. Internet Ad Revenues was $59.6 Billion in 2015

SOURCE: http://www.iab.com/insights/iab-internet-advertising-revenue-report-conducted-by-pricewaterhousecoopers-pwc-2/

4 / 35

img

5 / 35

Ads are annoying...

Didn't have to go far -- following screenshots are from yesterday.
Disclaimer: Not picking on anyone, we've all been there!

6 / 35

NESN img

7 / 35

CBS Boston img

8 / 35

TAKE OVER on Boston.com img

9 / 35

...and under the hood, the CODE...

10 / 35
<script type="text/javascript">
   (function() {
   var useSSL = 'https:' == document.location.protocol;
   var src = (useSSL ? 'https:' : 'http:') +
 '//www.googletagservices.com/tag/js/gpt.js';
   document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
   })();
</script>

https://support.google.com/dfp_premium/answer/1638622?hl=en

11 / 35

document.write

http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice

12 / 35

Enter Ad Blockers

13 / 35

State of Ad Blocking

2016 Reuters Digital News report: "24% of news consumers in U.S. block ads" -- June 16, 2016

http://digiday.com/publishers/global-state-of-ad-blocking/

14 / 35

sourcepoint June 2015: 1 in 10 U.S. surfers block ads img

15 / 35

Popular blockers

Browser extensions

16 / 35

Adblock Plus

img

https://adblockplus.org/

17 / 35

TechCrunch: AdBlock Plus closes in on a billion downloads

https://techcrunch.com/2016/05/09/adblock-plus-closes-in-on-a-billion-downloads/

18 / 35

uBlock Origin

img

Open source, light weight. https://github.com/gorhill/uBlock

19 / 35

Ghostery

img

"Tracking" blocker https://www.ghostery.com/

20 / 35

Sketchy part of ad blockers

21 / 35

True or false: if you don't have third-party javascript on your site, you don;t have to worry about ad blockers

22 / 35

CSS Demo

source code on github

23 / 35
:root .adsbox,
:root .ad-link,
:root .ad-text,
:root .ad-content,
:root .ad-label,
:root .ad-inner,
:root .ad.super
   { display:none !important; }

Example CSS Override from uBlok Origin.

24 / 35

Javascript Demo

source code on github

25 / 35

Where do they get that list?

26 / 35

EasyList

https://easylist.github.io/

easylist_general_hide.txt
easylist_general_block.txt

27 / 35

Counter Tools

28 / 35

BlockAdBlock

https://github.com/sitexw/BlockAdBlock

A.K.A. F*ckAdBlock, ready-to-use library

29 / 35

DetectAdBlock.com

http://www.detectadblock.com/

Tutorial on how to test by loading "ads.js" (used in my JavaScript Demo)

30 / 35

Heilmann method

https://www.christianheilmann.com/2015/12/25/detecting-adblock-without-an-extra-http-overhead/

Check the ad styled div to see if it is display: none, by testing test.offsetHeight === 0 Demo

source code on github

31 / 35

And then there are counter-counter tools

https://github.com/reek/anti-adblock-killer

Which lists all the ad block blocker

32 / 35

In conclusion

  • Internet ads suck.
  • Ads and ad blockers are here to stay.
  • Ad blockers are also business.
  • Learn to live with them.
33 / 35

img

34 / 35

Thank you!
https://github.com/daigofuji/co-exist-w-ad-blocker

@DaigoFuji on &

35 / 35

Do you like
Online Ads?

2 / 35
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
b Toggle blackout mode
f Toggle fullscreen mode
c Clone slideshow
p Toggle presenter mode
w Pause/Resume the presentation
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow