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 : 6736  
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

Validating HTML forms using BULMA and vanilla JavaScript

Today we are going to write about contact forms and how to validate them using JavaScript. The contact form seems to be one of the top features of every basic home…

A FULFILLED PROMISE - Using the FETCH API to make AJAX calls

In this article we talked about what AJAX calls are and how to use them in a traditional way, by using the XMLHttpRequest (XHR) object. In short, thanks to AJAX…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

JavaScript: Spread and Rest operators

In today’s article we are going to talk about one of the features of the ES6 version(ECMAScript 2015) of JavaScript which is Spread operator as well as Rest operator. These features…

Javascript: what are callbacks and how to use them.

Today we are going to learn about a concept that is widely used in javascript and that is used quite a lot by today's frameworks, libraries, especially NodeJS. This is…

HTTP Cookies: how they work and how to use them

Today we are going to write about the way to store data in a browser, why websites use cookies and how they work in detail. Continue reading to find out how…

The package managers npm and yarn: main differences

Npm and yarn are package managers that help to manage a project’s dependencies. A dependency is, as it sounds, something that a project depends on, a piece of code that…

The Javascript asign() method to merge and clone objects

In this article, we will be covering Object.assign()method in javascript in detail with examples. A javascript object is a collection of key-value pairs. Keys are also known as properties of object. Keys…

All the javascript functions and methods to manipulate arrays

This article will show that the prominent JavaScript array functions are .map(), .filter(), and .reduce(), and will then go through examples of instances in which .every() and .some() would save…

TypeScript: The evolution of JavaScript

When you're involved in the development of a large project, programming languages like JavaScript don't seem to be the best solution. Their lack of elements such as Language Aids has…

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