How I increased by 3x my ads revenue doing a simple change on my site.

Nicolas Granja — Tue, 10 Nov 2020 01:22:59 +0000

I'm going to explaining how I managed to triplicate my revenue from ads with a pretty simple change on my website that I believe most of you can replicate on your own sites.

Disclaimer: what I actually triplicated was the number of pages per session, which directly affected my ads revenue (you get paid for the number of impressions). To make it clearer, with the same number of visitors I triplicated the number of ads impression, and - before you ask - without adding more ads. Let's see how I did it.

Pleasant surprise.

A couple of days ago I shared on the subreddit r/India (post here) my website knowyourworth.app. That drove a lot of traffic to my site, so I decided to take a look at the analytics. I found that I got 9k+ page views that day, but what it caught my attention was the number of Pages per Session: 7.3.

7.32 pages per session on May 11

Before that day (11th May), that metric was around 2.2, as you can see in the following image.

2.22 pages per session the week before

Finding the reason.

The thing is, that the main page of my site is a big table where you can compare salaries filtering by location, education, experience, job title, and more.

Salary comparison page with some filters applied.

Most of my visitors spent most of their time on that page, applying filters and browsing the data using the table pagination.

A lot of people were asking me if I could show the state of the filters in the URL, so they could copy it and share the search very easily.

So that's exactly what I did.

Filters in the URL

Once it was done, each time someone makes a search, the URL change (without refreshing the page, thanks to VueJs that reuse the component) but it actually counts as a new page, at least for google analytics. Therefore, with the same number of visitors, I get 3 times more page views.

The (not so) magical change.

It is debatable whether it is right to count it or not, but anyway I decided to take advantage of this, refreshing the ad each time the URL changed (I'll keep the technical side of these changes aside, but if someone is interested just ask me), That's it, that's was the small change.

Ad refreshing each time a filter is applied.

As you can see, it is a non-intrusive way to show more ads to the users but in a nicer way, not just throwing annoying ads all over the page.

I believe this kind of change could be useful for a lot of people that have a website like curated lists, job boards, etc, any page where the people spend a lot of time playing around with filters or something similar.

Well, that's it, thanks for reading, I hope it was useful.

If you have some suggestions or ideas you can reach me out on twitter.

How to migrate a VueJs project to NuxtJs in 8 steps.

Nicolas Granja — Wed, 13 May 2020 13:41:03 +0000

A couple of months ago I built a project using my favorite stack: VueJs + Buefy for the Front-End and NodeJs + Express for the Back-End. Some days later the website started to gain some traction, and I got a lot of traffic, but as most of you might know, a VueJs SPA is not a good option for SEO, therefore I decided to rebuild it completely with NuxtJS.

Since searching on the web I was not able to find any documentation or tutorial of how to do it, I’ll try to explain step by step what I did. I tell you in advance that it is very easy and just takes a couple of hours, but I’m assuming you have some idea of how nuxt works (if is not your case, I highly recommend you to read the official documentation)

1. Create the nuxt project

First of all, create the nuxt project using create-nuxt-app . You can get more information here.

2. Copy your Stores

If you aren’t using Vuex in your VueJs project you can skip this step. If so, you can pretty much copy your store files to the new /store folder in your nuxt project. In my case, I was just using an index.js file. In case you had split your store in modules you can follow these instructions.

3. Copy your Components

First, we have to differentiate what is a component and what is a page. I don’t know which directory structure are you using, but I usually split my .vue files into two folders: /views and /components. It is pretty obvious, but in the views folder, I put those vue components (.vue files) that are pages, i.e: About, Home, FAQ, etc. While in the components I put those subcomponents that I reuse - and are included - in the views.

In case you are not following a structure similar to this one, you’ll have to make this distinction, and just copy the components - that are not pages - to the corresponding new /components folder.

4. Create your Pages

This time, you should rethink your pages and recreate each route following the convention specified by Nuxt.

Nuxt.js automatically generates the vue-router configuration based on your file tree of Vue files inside the pages directory.

If you don’t have any idea fo how to do this, I recommend you to read the following sections of the official Nuxt documentation: Routing and Views.

5. Change router-link for nuxt-link

Once you have all your components and pages in the correct place, you will need to change all your router-link for nuxt-link. To see how nuxt is naming the routes you can check the automatically generated file inside /.nuxt/router.js

6. Change the way you fetch the data from your servers

You should go through all your new Pages, and refactor the way you were loading the data from your server.

You may want to fetch data and render it on the server-side. Nuxt.js adds an asyncData method to let you handle async operations before initializing the component

More information about asyncData here.

If you were also fetching data in your components and you are trying to use asyncData, this is won’t work, because components don’t have an asyncData method.

But don’t worry, there are two solutions to this:

Make the API call in the mounted hook. Take in count that with this way the server-side rendering won’t work
Make the API call in the asyncData or fetch methods of the page component and pass the data as props to the sub-components.

7. Add your plugins

Go to your main.js file of your VueJs Project, and identify which plugins you are using. Then set up all your plugins following the instructions here.

8. Add the external resources

Finally, If you are using some external resources in the index.html file of your VueJs project, like stylesheets or an external js script, you can include them in the head object of nuxt.config.js. See more info here.

After doing all those changes, you can see how it looks like my new NuxtJs project compared to the old VueJs (pretty similar right?).

If you are wondering which was the project that I rebuilt with NuxtJs you can see it here: KnowYourWorth

Let me know if you have any question or reach me out on twitter @ngranja19

Cheers

DEV Community: Nicolas Granja