There are few things quite as annoying as paying a premium for access to something and yet still be bombarded with ads and pitches to move you away from the content you’re trying to get to.
Hulu does it. Youtube does it. All newspaper sites do it.
But the site that sparked my ire, and led me down a rabbit-hole of ad-blockers, is roosterteeth.com — a video content network that houses comedy and gaming focused channels like Funhaus, Achievement Hunter, Inside Gaming, etc.
The Rooster Teeth site sucks
I’ve watched the chaps at Funhaus since I was maybe 17, when they were at Machinima and Inside Gaming. They’ve influenced a lot of my humour, the games I play, and the content I’ve watched, and collectively over that decade I’ve watched hundreds of hours of the team making fun of the video games they’re playing. So when they moved from Machinima to Rooster Teeth I was pretty excited for what was to come and joined Rooster Teeth’s First premium subscription service to support one of my favourite YouTube teams.
However, that’s where the problems started. The Rooster Teeth website has always been horrific, and was always ‘nearly done’ being migrated to something new. Then one day, it finally was. Aside from being responsive however, it was a pretty inelegant new design — likely the result of a managerial team picking at it every step of the way. It featured adverts, up-sells, banners, links to their store, new carousels to content I had no interest in, or videos that are re-hosted from partner’s YouTube channels.
I never really watched anything on the Rooster Teeth site itself, they haven’t had an Amazon Fire app (a 4k tv streaming device that outsells both Apple’s Apple TV, Roku offerings, and Google’ Chromecast combined), so I was effectively unable to watch their content outside of YouTube on a large screen.
So when I got an email from the CEO last week notifying subscribers the subscription fee was increasing by 120%, from $14.99 to $32.99 for a six month subscription, I took pause to reconsider what I was getting for my money.
This is the current landing page for the Funhaus channel (hover to see content relating to Funhaus’ videos highlighted in blue):
There’s 27 carousels, with only two showing Funhaus videos (~7.4%). A quick tally in photoshop, including the hero image, gives a total of ~13% of the page dedicated to Funhaus content and almost 4MB extra to download on the page (though perhaps a large portion of that is ‘lazy load’ed).
Enter uBlock
While uBlock is a solid ad and popup blocking Chrome Extension, it also works really well for stopping trackers that follow you around the web (hi Mark!).
I use it mainly to prevent those creepy trackers and change what’s shown on sites since generally I’m happy to support creators and writers and don’t block ads on many sites. We’re all blind to them all anyway.
Whilst one might argue that those extra carousels on the Funhaus channel page aren’t exactly ads, they are trying to capture my attention and divert it from the content I’m trying to access. Typing https://fun.haus into my browser’s address bar gives me a page where only 7% of the content is for Funhaus videos compared to their YouTube channel (https://www.youtube.com/funhaus) where the central page is their work, exclusively.
Using uBlock’s ‘Element Picker’ we can select and remove the html elements we don’t want to see on the page. Using the standard picker and the ‘has-text’ condition, removing everything but the Funhaus content leaves us with this;
A pretty stark difference, and infinitely more usable and less distracting. So let me walk you through how I did it.
Hiding variable content with uBlock
The selector tool in uBlock is rather simple to use, just point and click at what you’d like to disappear. It usually does a pretty good job, but occasionally, elements are dynamically generated, or often change depending on promotions etc. To combat that, we can use ‘variable content’ selectors within uBlock to hide any element with the appropriate keyword in.
For example, the ‘Merch’ carousel sends me to the American store which doesn’t ship to the UK, and the UK store doesn’t have any of the same merch in either, so displaying this to me is just cluttering up the UX.
To select any element with the word ‘merch’ in, we simply use the has-text() selector, domain, and div we want the filter to act on in the uBlock dashboard and enter the keyword in the brackets.
In this case, on the Roosterteeth.com site we can hide any carousel (which has a div class of “channel-carousels” in this instance) which has the keyword ‘merch’ by using the following:
roosterteeth.com##.channel-carousels:has-text(merch)
Naturally, it pays to be as selective as possible so you’re not hiding content unnecessarily, so we’re able to nest divs using ‘>’ as a signifier.
The code if you’d like to repeat my process and save yourself some time:
roosterteeth.com##.top-marketing-banner__img
roosterteeth.com##.carousel-container.featured-gear
roosterteeth.com##.carousel-container.rttv-carousel
roosterteeth.com##.channel-carousels > section.carousel-container:has-text(merch)
roosterteeth.com##.channel-carousels > section.carousel-container:nth-of-type(1):has-text(Rooster)
If anyone’s made it this far and hasn’t heard of Funhaus, they’re very silly and not for everyone, but I couldn’t recommend them any more highly.