How to use AdSense with Responsive Design

by Janeth Kent Date: 23-05-2020 javascript asynchronous adSense ads responsive design

After some time publishing interesting information on your website, it is normal that you want to make a profit. One of the most widely used systems is Adsense, a Google service that allows you to display advertising on your website to generate income.

An income that will depend on the number of visits you have. If you are thinking of starting to monetize your website, today we will explain how to configure the Google Adsense service in different technologies.

Create Adsense account

To start using Google Adsense you will need to register with the service. To do this we can use our Google account that we have already created. The first thing will be to go to the Adsense page to start the registration.

The first step will be to indicate the website we want to monetize and our Gmail email address.

The next step will be to select our country and accept the terms and conditions.

Once you have clicked on the "Create Account" button, you will have registered in the system. The next step will be to paste the code associated with our account into our website so that Google will display advertising on it. The code that is generated is similar to the one we left for you.

<script async src="//"></script>>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-yourcode",
enable_page_level_ads: true

You can put this script in the section "<head>/head>" of your website. In the next section we'll see how to paste it according to the technology used for the development of our website.

Create Ads on Google Adsense

Once you have inserted the code in your website and it has been validated, it is time to start creating the ad blocks that you will use in your portal. These blocks will be the place that Google will use to show the advertising.

To create one of these blocks, the first thing we must do is enter our Google Adsense account. Once inside, in the left menu we will select the option of "Ads Blocks" that is inside the section of "Ads".

The next step is to click on the "New Ad Block" button

You can choose what type of ads will be shown on your blog: text, display (with images) and text & display (either option will be shown).

You can customize different options, such as the style of the text ad (if you've chosen display only, you won't be able to edit this option) or the reserve ads (when Google can't find ads for your blog, you can choose to have a blank slot or to show ads from a similarly themed website, for example).

Once you have configured it, click on "Save and get code".

Copy the code to your page

You'll need to copy the code that Google AdSense provides and paste it into the site where you want the advertising to go on your blog. For example, you can create a widget on your Wordpress blog and paste it there.

Many Blogger or Wordpress themes have a section for you to paste your Google AdSense code into. If you're not sure how to do this in your theme, ask the theme creator.

Add a payment method

You do not need to select your payment method immediately, as it will only be necessary once you have reached the minimum billing. However, it does not hurt to do so as soon as you create your account.

In the left column you will see the amount that Google must pay you and in the second column your payment method will appear. In addition, you can manage your profile in the right column.

If you have not selected a payment method, click on "Manage" in the second column ("How you will receive payments").

Then click on "Add a new payment method".

You will have to enter your bank account details: account holder, IBAN and BIC (all these details can be provided by your bank).

Click on "Save" and Google can start paying you advertising revenues once you have verified your account.

To do this, you'll need to enter the amount that Google has deposited into your bank account.

Check the general panel of your account

Once the ads are displayed on your website, you can check their performance. You will be able to see the revenue for the current day, the day before, the last 7 days and the last 28 days.

In addition, under "final earnings" you will be able to see your total account balance.

In the "Evaluation table" you will be able to see if your site is getting the most out of advertising. For example, if it is multi-device, if it is fast or slow and if it has the recommended ad formats.

Click on each of the measurements to get information about how to improve your site.

To do so, click on the settings icon and select "Payments".

You can also see from which countries people visit your blog the most, where advertising works best or which website has the best performance.

You can also check your RPM (revenue per thousand impressions).

Block an ad on your website

If you wish, you can block some ads so that they never appear on your website.

To do this, click on "Allow and block ads". The first section of this section, "Advertiser's URL", allows you to block the ads on the website you enter.

The second section, "General Categories", allows you to choose what type of subject matter will be displayed on your website.

The third section, "Sensitive Categories", shows the categories that are usually blocked, such as dating services, black magic, money-making websites...

In "Ad networks" you can choose which other ad platforms you approve or not in your account. That is, AdSense works with other ad networks and you can choose which ones to work with.

In "Publishing Ads" you can choose what kind of ads you want to approve or not. For example, you can choose to show them according to the interests of the users or the information obtained in your blog.

Activate the ad review center

In the "Ad Review Center" you can choose which ads are displayed on your website or not.
You will have to enable them by clicking on "click here" and within one hour you will be able to check which ads receive the most impressions.

Consult the performance report

You can also check your account performance under "Performance Reports".

You will be able to consult the CTR of your page (percentage of clicks, that is to say, the number of times your ads are clicked on in proportion to the visits), CPC (cost per click) and RPM (revenue per thousand impressions).

You can also export it to Excel and check its performance over time.

by Janeth Kent Date: 23-05-2020 javascript asynchronous adSense ads responsive design hits : 7118  
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.


Related Posts

Strings in JavaScript: What they are and how to use them

In this tutorial we are going to explain what strings are and how they are used in JavaScript. The tutorial is intended for people who are learning to program in…

Dates in local format with Javascript

In the articles we have about dates in JavaScript we were missing one about how to create dates in local format with JavaScript. That is to say, being able to…

Formatting hours in Javascript

Continuing with the set of articles that talk about internationalisation elements, like the previous one where we talked about relative dates in JavaScript, we will see in this one how…

Request data with prompt in JavaScript

After having published several articles about how to manipulate arrays and dates, today I will publish a post that some of you will find too basic and others will find…

Relative dates in JavaScript

One of the interesting things about the internationalisation library represented in the Int object is the handling of relative dates in Javascript. This handling allows us to represent a date…

How to access webcam and grab an image using HTML5 and Javascript

We often use webcams to broadcast video in real time via our computer. This broadcast can be viewed, saved and even shared via the Internet. As a rule, we need…

The JavaScript forEach loop

We have already talked about how to handle some of loops  types in Javascript including for, for-in and for-off loops. In the case of today we are going to see how…

What are React Hooks and what problems they solve

Working with React, - and before the release of Hooks in version 16.8 -  there was always the possibility to create components in three different ways based on a number of…

Flattening arrays in JavaScript

When we are handling arrays that are arrays or have multiple dimensions it can be very useful to know how to flatten arrays in JavaScript. That is to say, to…

How to populate an array with random numbers in JavaScript

Some of you might think that what we explained in the article on how to populate an array with numbers, apart from the didactic part, would not have much applicability…

How to populate an array with numbers in JavaScript

Populate an array with numbers in JavaScript The first step is to initialise the array. So today we are going to see a simple way to do it and see how…

Top Javascript Libraries and Frameworks Part 2

What are JavaScript frameworks?   JavaScript frameworks are application frameworks that allow developers to manipulate code to meet their particular needs. Web application development is like building a house. You have the option…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration