What is Google Adsense

When you have used the Internet before reading this article, or also during this article you already came across Google AdSense. Google Adsense is an advertising network by Google. It is the most popular ad network and is used to monetize blogs like this one.

With Google AdSense, you can monetize your blog or website like this one. So for you, AdSense is a way to earn money with your Audience. To be more Specific you get a commission every time a visitor clicks on an ad (AdSense uses a CPC mode).

How much could I earn with AdSense

Ads on AdSense are set per auction. This means that sellers could bid for ads per region and category at auctions and these bids are affecting the ad revenue you as a creator will receive.

You as creator then will be paid per clicked ad, so the earnings are also affected by your presentation of the ads, your audience, and how many ads you have per site. (be sure there are not too many).

For Estimating the revenue google offers a calculator which you can access here.

How to set up a Google Adsense account

To set up an AdSense account go to this page.

You, Will, need a Google account, if you have one already, good if not create one beforehand.

Then you can sign in with your Google account and go through all of the steps.

Since you are dealing with a potential income here, please also make sure to read through their terms of service and check if you are ok with it.

The Last step is to provide your website name.

When completed you will see something like this:

!

Vue use Google AdSense

Copy the snippet below...

Not with vue js. Figuring out how to do that took me days of trial and error work and nearly got me to the limits of my free Netlify build minutes.

As vue js developers, we all know that copying script tags into our projects are not that trivial, especially when they need to be put inside of our webpage.

When Googling this problem, I came across a package called: "vue-google-AdSense". At the first sight, this package looks promising, but when clicking on any example my antivirus software alerted me.

This could also be a false positive, but again since this is about money and the solution is pretty easy, I would recommend doing this on your own.

Install vue-meta

If you want to monetize your site, I generally recommend this package.

npm i vue-meta

vue-meta gives you the ability to manage the metadata for your site. This is very important when it comes to SEO and worth your article.

But with vue-meta, you are also able to add scripts to the head of your site. Exactly what we were asked for.

Add a script to the head of a vue project

To add the provided script to the head section, just copy the following snippet and put it into your main.js.

    head.script.push({
        async: true,
        src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
        dataAdClient: "ca-pub-yourId"
    });

Verify it with your dev tools and then deploy your site.

When everything is deployed, click on the submit button where you copied the form from, and then Google should be able to find the tag on your site.

If this fails, check for typos and double-check if the correct script with the correct ID is in the head of your production site.

When everything went fine, Google will check your site, they notify you when everything is done. For me, this was at the next day.

When your site was accepted and you log in the first time into you're AdSense portal you will see this message:

This is because the ads.txt file is missing.

What is an Ads.txt file?

The ads.txt file is a file used to prevent ad fraud. So collecting ad revenues without showing the ads at all or showing ads from multiple suppliers on top of each other. The file itself consists of the information of each advertiser advertising its services on your vue site.

How to fix the AdSense missing ads.txt error

To add your ads.txt file, first, download it from your AdSense portal.

Then copy it into the head of your static directory. Everything inside this directory will be served automatically under the root of your site.

To verify it let's build the project and visit localhost:8080/ads.txt.

You can see now your ads.txt file under /ads.txt. Note that it can take some days for Google Adsense to find and verify you're changing.

If you see the same as I did, you are good to go, just push and enjoy being monetized.

How long does it take to find the ads.txt file?

According to Google AdSense, it could take between one day and up to a month. This strongly depends on the amount of traffic you got and also some luck. For me, it took two days even I did not have much traffic on my site in that period.

Conclusion

Integrating Google Adsense is an easy task if done right, else it could be a time- and nerve-consuming task. By using this method you will end up with a nice clean and easy way of integrating Adsense into your Project without using malicious-looking third-party code.

In one of my next articles, I want to dive into showing ads in your vue js project and the different types of and my opinion on what type is the best. But this will take some weeks till my A/B tests are done and I have the data to compare the different types of ads with each other. So Stay tuned!

thanks for reading! If you want to know more about Google Adsense or got problems or feedback for this article, just say hi, or buy me a coffee.

Happy coding,

Alex.