Ads

Build sample page with ads

In this walk-through, you’ll build a simple page that includes responsive ads using Google AdSense and the Web Starter Kit:

If you’re unfamiliar with the Web Start Kit, refer to the Set Up Web Starter Kit documentation.

In order to include ads in your site and get paid, you’ll need to follow these simple steps:

1. Create an AdSense account.
2. Create ad units.
3. Place ad units on a page.
4. Configure payment settings.

Create an AdSense account

In order to serve ads on your site, you’ll need an active AdSense account. If you don’t already have one, you’ll need to create one and agree to the AdSense terms of service. When you create your account, you’ll need to verify:

• You are at least 18 years old and have a verified Google Account.
• You own a live website or other online content that complies with Google AdSense program policies ; ads are hosted on this site.
• You have a postal address and a mailing address associated with your bank account so you can receive payments.

Create ad units

An ad unit is a set of ads that are displayed on your page as a result of JavaScript you add to your page. You have three options for sizing your ad units:

• Responsive (Recommended) .
• Pre-defined .
• Custom-sized .

You are building a responsive site; use responsive ad units. Responsive ads automatically resize based on the size of the device and the width of the parent container. Responsive ads work in line with your responsive layout, ensuring your site looks great on any device.

If you don’t use responsive ad units, you will have to write a lot more code to control how ads appear based on a user’s device. Even if you must specify the exact size of your ad units, use responsive ad units in advanced mode .

To make your code simpler and save you time and effort, the responsive ad code automatically adapts the ad unit size to your page layout. The code calculates the required size dynamically based on the width of the ad unit’s parent container, then picks the best-performing ad size that fits in the container. For example, a mobile-optimized site with a width of 360px might show a 320x50 ad unit.

Track the current top performing ad sizes in the Google AdSense Guide to ad sizes .

To create a responsive ad unit

1. Visit the My ads tab .
2. Click +New ad unit .
3. Give your ad unit a unique name. This name appears in the ad code that’s pasted into your site, so be descriptive.
4. Select Responsive from the Ad size drop-down.
5. Select Text & display ads from the Ad type drop-down.
6. Click Save and get code .
7. In the Ad code box that appears, select the Smart sizing (recommended) option from the Mode drop-down. This is the recommended mode and doesn’t require you to make any changes to your ad code.

After creating your ad unit, AdSense provide a snippet of code to include on your site, similar to the code below:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Top ad in web starter kit sample -->
<ins class="adsbygoogle"
  style="display:block"
  data-ad-client="XX-XXX-XXXXXXXXXXXXXXXX"
  data-ad-slot="XXXXXXXXXX"
  data-ad-format="auto"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Include ad units in your site

To include the ad on the page, we need to paste the provided AdSense snippet into our markup. If you want to include multiple ads, you can either re-use the same ad unit, or create multiple ad units.

1. Open the index.html in the app folder.
2. Paste the provided snippet into the main tag.
3. Save the file and try viewing it in your browser, then try opening it on a mobile device or via the Chrome emulator.

Try it

Configure payment settings

Wondering when your AdSense payment will arrive? Trying to figure out whether you’ll be paid this month or next month? Be sure you’ve completed all of the steps below:

1. Verify you’ve provided any required tax information in the payee profile .
2. Confirm your payee name and address are correct.
3. Select your form of payment on the Payment settings page .
4. Enter your personal identification number (PIN) . This PIN verifies the accuracy of your account information.
5. Check to see if your balance reaches the payment threshold .

Refer to Intro to AdSense payments for any additional questions.