Adblockers almost axed our launch 🪓

TLDR;

• January 2024: We pre-launched Adfolio (https://adfolio.design) on LinkedIn a curated list of the best B2B ads with breakdowns of why they work. It generated over 800+ users requesting access
• During prelaunch I experienced one of the most tedious bugs ever on the app, that caused the whole content to suddenly vanish (SPOILER: it was caused by Adblockers)
• February 2024: Almost 3k monthly organic users with a high returning rate with first sponsorship deals on the table (will post results in March 2024)
• Goal is to push organic growth with social and to end the year with $10K ARR

Peace ✌️

Here's also the long version:

Chaos, dopamine, excitement, frustration, and anger.

Throw that in a bowl, mix it up, turn it to 100 and you'll have a feeling of how we felt about three weeks ago when launching (or more accurately pre launching Adfolio - something we've been hacking together in the last week of Dec 2023).

What it is, it's essentially a curated list of the most impressive B2B ads, with a twist. They also include so-called "breakdowns", where we explain in short each aspect of the ad, why it works etc.

Behind it all it was just me (Niko) taking care of the branding, UI, and development in Nuxt.js 3, and my partner in crime Andrea, who chooses the ads and breaks them down, in addition to giving me the most thorough QA ever.

The idea was born on Andrea's LinkedIn where she has been posting B2B ads breakdowns and marketing related content since June 2023. Because of the positive feedback from the LinkedIn community we decided to upgrade the content to it's own website.

Sure there are many Swipe files already out there, but who reads them anyways? People just save them and never open them.

We had an idea and even an MVP. But how to validate? LinkedIn to the rescue!

We created a sort of validation test of LinkedIn, where Andrea made a post introducing Adfolio. We used the "comment for access" type of post to see how much buzz it would create. Honestly, we expected something around 100+ access requests.

Ahm, it turned out to be more than 800+ people requesting access which blew our minds right off the get-go. Andrea spent almost 2 weeks manually replying to people, as this was also a good way of creating the first touch point and starting meaningful conversations.

So one post on LinkedIn brought in 1300+ users. But wait, didn't we send it to only 800+ people?

Exactly. Meaning that it was being rapidly shared/referred among users. We also talked with some of the users and gave them questionnaires and we have a pretty good NPS score of around 4.5.

And now to the fun part. The bug that almost axed our entire launch.

Adfolio is built on Nuxt 3 (https://nuxt.com/), hosted on Vercel and I run a vritualised Pocketbase.io (https://pocketbase.io/) backend which is hosted on Fly.io (https://fly.io/). All of this for a monthly hosting plan of around $10.

I have most experience doing frontend in Vue.js and Nuxt.js and I had my fair share of bugs and quirks around building SPA apps.

On pre-launch day, when 800+ people went to Adfolio everything was working smoothly. The load times were solid and no serious bugs occurred.

Or so it seemed.

I was watching user recordings (cuz dopamine) and because we just couldn't believe the turnout of users on the site. And then I noticed it. When were navigating through the page, sometimes the whole list of ads (about 30 of them at the start) just vanished. They weren't event being redirected to the error page, which I found very weird.

It happened only when hydration occurred, so on the client-side.
For those of you who aren't familiar with this concept, some frameworks like Nuxt allow for a so called "Universal" rendering mode.

Universal rendering mode fetches and generates the DOM on the server side and then returns the fully rendered document to the client side, where client side routing takes over (which is also called hydration). Then the app behaves like a SPA. Best of both worlds.

I needed some time to wrap my head around this concept and now I feel like we've almost hade the complete circle of going from pure SSR languages like (like PHP) to pure client side (like Angular.js) and now to hybrid modes (like Next.js, Nuxt.js, Astro...).

That still didn't explain the bug that was happening and I was seriously running out of ideas.

There's a saying that me and my colleague from faculty made up for debugging. The longer it takes to debug, the more likely it is that it's a stupid ass bug.

That was true again in this case.

We were potentially losing users fast because of this and we didn't know what to do. And then after the fifth day, of 14 hours of work, coding, and debugging, Andrea asked something at 2 pm at night that caused the eureka moment.

She asked: What if we tried to use Adfolio with ad blockers?

And that was it.

I installed an Adblocker extension from Chrome and what do you know. I could reproduce the bug instantly. I was never more happy to see an error on my machine than at that time.

🛑 And what was that dammed error, finally?

ADBLOCKERS WERE BLOCKING THE CLIENT-SIDE REQUEST AFTER HYDRATION BECAUSE THE API ROUTE & PAGE SLUG CONTAINED THE WORD AD.

Seriously.

The fix? I changed my API route and page slug to /breakdowns and it works.
The magic of stupidity.

The moral of the story? Maybe that the Maxim they use in Medical schools:
"When you hear hoofbeats, think of horses, not zebras" also holds true in computer science?

I don't know honestly.

But I'm happy that we solved it, and haven't had this error since. I have new ones new, don't worry, but these ones I can at least reproduce.

I wanted to share the technical founders side of a product launch, so you shouldn't feel bad if your product doesn't work perfectly from the start. We never stop learning and we may not repeat the same mistakes, but we'll make new ones and learn from them.

If you managed to stay with me for so long, congrats and thanks a lot! I'm not much of a copywriting type myself, so I don't know if I did good or not.

You tell me.

And while you're at it, check out the app that caused me so much joy and horror in the last 2 months and let me know your thoughts.

🔗 https://adfolio.design

And as always, don't hesitate to throw any constructive criticism my way.

Cheers