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 : 8851  
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 upload files to the server using JavaScript

In this tutorial we are going to see how you can upload files to a server using Node.js using JavaScript, which is very common. For example, you might want to…

How to combine multiple objects in JavaScript

In JavaScript you can merge multiple objects in a variety of ways. The most commonly used methods are the spread operator ... and the Object.assign() function.   How to copy objects with…

The Payment Request API: Revolutionizing Online Payments (Part 2)

In the first part of this series, we explored the fundamentals of the Payment Request API and how it simplifies the payment experience. Now, let's delve deeper into advanced features…

The Payment Request API: Revolutionizing Online Payments (Part 1)

The Payment Request API has emerged as the new standard for online payments, transforming the way transactions are conducted on the internet. In this two-part series, we will delve into…

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

How do you stop JavaScript execution for a while: sleep()

A sleep()function is a function that allows you to stop the execution of code for a certain amount of time. Using a function similar to this can be interesting for…

Mastering array sorting in JavaScript: a guide to the sort() function

In this article, I will explain the usage and potential of the sort() function in JavaScript.   What does the sort() function do?   The sort() function allows you to sort the elements of…

Infinite scrolling with native JavaScript using the Fetch API

I have long wanted to talk about how infinite scroll functionality can be implemented in a list of items that might be on any Web page. Infinite scroll is a technique…

Sorting elements with SortableJS and storing them in localStorage

SortableJS is a JavaScript extension that you will be able to use in your developments to offer your users the possibility to drag and drop elements in order to change…

What is a JWT token and how does it work?

JWT tokens are a standard used to create application access tokens, enabling user authentication in web applications. Specifically, it follows the RFC 7519 standard. What is a JWT token A JWT token…

Template Literals in JavaScript

Template literals, also known as template literals, appeared in JavaScript in its ES6 version, providing a new method of declaring strings using inverted quotes, offering several new and improved possibilities. About…

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…