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 : 8252  
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 AND DEVELOPMENT.


Related Posts

How to use the endsWith method in JavaScript

In this short tutorial, we are going to see what the endsWith method, introduced in JavaScript ES6, is and how it is used with strings in JavaScript. The endsWith method is…

What are javascript symbols and how can they help you?

Symbols are a new primitive value introduced by ES6. Their purpose is to provide us unique identifiers. In this article, we tell you how they work, in which way they…

Callbacks in JavaScript

Callback functions are the same old JavaScript functions. They have no special syntax, as they are simply functions that are passed as an argument to another function. The function that receives…

How to create PDF with JavaScript and jsPDF

Creating dynamic PDF files directly in the browser is possible thanks to the jsPDF JavaScript library. In the last part of this article we have prepared a practical tutorial where I…

How to make your own custom cursor for your website

When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…

Node.js and npm: introductory tutorial

In this tutorial we will see how to install and use both Node.js and the npm package manager. In addition, we will also create a small sample application. If you…

How to connect to MySQL with Node.js

Let's see how you can connect to a MySQL database using Node.js, the popular JavaScript runtime environment. Before we start, it is important to note that you must have Node.js installed…

JavaScript Programming Styles: Best Practices

When programming with JavaScript there are certain conventions that you should apply, especially when working in a team environment. In fact, it is common to have meetings to discuss standards…

Difference between arrow and normal functions in JavaScript

In this tutorial we are going to see how arrow functions differ from normal JavaScript functions. We will also see when you should use one and when you should use…

JavaScript Arrow functions: What they are and how to use them

In this article we are going to see what they are and how to use JavaScript Arrow Functions, a new feature introduced with the ES6 standard (ECMAScript 6). What are Arrow…

How to insert an element into an array with JavaScript

In this brief tutorial you will learn how to insert one or more elements into an array with JavaScript. For this we will use the splice function. The splice function will not…

What is the difference between primitives types and objects in JavaScript?

In this short tutorial we are going to look at the differences between primitive types and objects in JavaScript. To start with, we're going to look at what primitive types…

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