AdSense Custom Search Styles

UPDATE: As of March 9th 2020, Custom Search Ads will transition from styling the JavaScript tag on the client side to using the Custom Search styling controls in the AdSense interface. If you’re already using the AdSense Custom Search styling controls, this will not impact you. https://support.google.com/adsense/answer/9724088

About Custom Search Ads

Custom Search Ads is a Google product that lets you monetize the search results pages of your own search experience. If you don’t already have a search experience on your site, consider using our Custom Search Engine, which can provide both a search experience and revenue from search ads.

If you think that your site may be a good fit for Custom Search Ads, we encourage you to read more and sign up. We’ll review your site and let you know when you can start using Custom Search Ads.

Benefits
More relevance, more revenue: Custom Search Ads uses the search query to deliver highly targeted, relevant ads. The result is satisfied users and more revenue.
As seen on Google: leverage the expertise and unique ad formats found on Google while accessing our partner network of over one million advertisers.
Native and fully styleable: search ads can be styled to match the look and feel of your site. Size, location, color and font are all in your control.
How Custom Search Ads works
You place search ads on your site or in your app by adding a few lines of code. You can have multiple search ads on your page, located in multiple ad containers. For example, you might have ads above your search results, to the right of them, interspersed within them, or at the end of your page. Where you choose to place your search ads is up to you. Custom Search Ads calls out to Google and gets ads for all of the ad containers on your page with a single efficient request.

Custom search styles
Custom search styles let you style the ads in your search results feed to match your site. Custom search styles are designed for:

A better user experience: they fit naturally on your site and provide a more attractive experience for your visitors.
A great look and feel across different screen sizes: the ads are built to look great on all platforms: the mobile web, desktop and within apps.
Ease of use: easy-to-use editing tools within AdSense help you make the ads look great on your site.

AdSnese editor for custom search styles

Create a custom search style

Here’s how to create a new style for your search ads:

  1. Sign in to your AdSense account.
  2. Click Ads for search  Custom search styles.
  3. Click New Search Style.
  4. Select the ads template that matches your search results page.
  5. Style your ads to match your search results. For more information, see Custom search style ad settings. You can also toggle the platform and width to see how the ads look on different device sizes.
  6. Click Save style or Save and get code.

Get the code for your custom search style

After you’ve created your search style, follow these steps to copy and paste the code into your search page:

  1. Sign in to your AdSense account.
  2. Click Ads for search  Custom search styles.
  3. Click Get code .
  4. On the “Code generator” page:
    • In the “Your ad containers” section:
      1. Add the HTML DIV ID of the ad container on your search page. Alternatively you can keep the default container names (e.g., afscontainer1) and update the DIV IDs on your page to match.
      2. (Optional) Click +add container to add the HTML ID of another container.
    • In the “Now copy and paste the code” section:
      1. Copy and paste the first code snippet into the <head> tag of your search page.
      2. Copy and paste the second code snippet into the <body> tag of your search page.
  5. When you’re finished, click I’m done.

Code example

Here’s an example of a search results page with both code snippets added.

<html>
<head>
<script async="async" src="https://www.google.com/adsense/search/ads.js"></script>
<!-- other head elements from your page -->
<script type="text/javascript" charset="utf-8">
(function(g,o){g[o]=g[o]||function(){(g[o]['q']=g[o]['q']||[]).push(
  arguments)},g[o]['t']=1*new Date})(window,'_googCsa');
</script>
</script>
</head>
<body>
<div id="afscontainer1"></div>
<div id="afscontainer2"></div>
<script type="text/javascript" charset="utf-8">
  var pageOptions = {
    "pubId": "partner-pub-1234567891234567", // Make sure this is the correct client ID
    "styleId": "1234567891"  // Make sure this is the correct style id
    "query": "" // Make sure the correct query is placed here
  };
  var adblock1 = {
    "container": "afscontainer1",
  };
  var adblock2 = {
    "container": "afscontainer2",
  };
  _googCsa('ads', pageOptions, adblock1, adblock2);
</script>
</body>
</html>

Editing a custom search style

After you’ve created a new search style and placed ads on your search page, you can edit the styling of those ads at any time in your AdSense account. You can also choose to run an experiment to test your edited style before you apply it to your search ads.

  1. Sign in to your AdSense account.
  2. Click Ads for search  Custom search styles.
  3. Click edit  next to the style you want to update.
  4. Update the style of your search ads. For more information, see Custom search style ads settings. You can also toggle the platform and width to see how the ads look on different device sizes.
  5. Click Save style.
  6. Choose your save option:
    • Update now – to immediately update all search ads that use this style.Note: When you save a custom search style, the changes you’ve made are applied immediately to all of the sites and apps that use that style
      Or
    • Set up experiment first – to test your new style on a limited number of users for a specific time first. Learn more about custom search style experiments.Here’s how to set up your experiment:
      1. Give your experiment a name.
      2. Set the maximum number of days you want your experiment to run for.
      3. Set the maximum percentage of users you want to see your experiment.
  7. Click Save.
download - Complete How-to Guide for AdSense Custom Search Ad Styles

Custom search style ad settings

All of the available ad settings for Custom Search Ads are described below.

Global options

Use these settings to apply styles across your ads:

SettingDescription
FontSet the font for the text in your ads. You can choose from a range of Google fonts.
Font colorSet the font color for the text in your ads.
Background colorSet the background color for your ads.
PaddingSet the padding around the top, bottom and sides of your ads.
BordersSet the border size and color for your ads.

Headline

Use these settings to style the headlines of your ads:

SettingDescription
FontSet the font and font color for the headlines.
Font sizeSet the font size for the headlines.
Line heightSet the line height for the headlines.
Letter spacingSet the letter spacing for the headlines.
EmphasisChoose whether you want the headlines to be bold, italicized, or underlined
PaddingSet the padding around the top, bottom and sides of the headlines.

Display URL

Use these settings to style the URL text of your ads:

SettingDescription
FontSet the font and font color for the URL text.
Font sizeSet the font size for the URL text.
Line heightSet the line height for the URL text.
Letter spacingSet the letter spacing for the URL text.
EmphasisChoose whether you want the URL text to be bold, italicized, or underlined.
On rolloverSet the emphasis and font color for the URL text on rollover.
PaddingSet the padding around the top, bottom and sides of the URLs.

Description

Use these settings to style the description text of your ads:

SettingDescription
FontSet the font and font color for the descriptions.
Font sizeSet the font size for the descriptions.
Line heightSet the line height for the descriptions.
Letter spacingSet the letter spacing for the descriptions.
EmphasisChoose whether you want the descriptions to be bold, italicized, or underlined.
PaddingSet the padding around the top, bottom and sides of the descriptions.

Ad badge

Use these settings to style the ad badge in your ads:

SettingDescription
FontSet the font for the ad badge. You can choose from a range of Google fonts.
Background colorSet the background color for the ad badge.
BordersSet the border color, size and radius for the ad badge.
PaddingSet the padding around the top, bottom and sides of the ad badge.

Image

If your layout includes an image, use these settings to style the image in your ads:

SettingDescription
Width                 Set the width of the image.
HeightSet the height of the image.

Left container

If your layout includes an image in the left-hand column, use these settings to style the image in your ads:

SettingDescription
Background colorSet the background color for the ad image.
MarginsSet the margins around the top, bottom and sides of your ad image.
PaddingSet the padding around the top, bottom and sides of your ad image.
BordersSet the border color, size and radius for the ad image.
WidthSet the width of the ad image.
HeightSet the height of the ad image.
Custom Search Styles Editor for AdSense

Custom search style ad extensions

Search ads can also have extensions. Ad extensions provide additional information such as contact details, sitelinks, click-to-call buttons, etc. The ad extensions and extension settings available for Custom Search Ads are described below.

Extension settings

You can use extension settings to turn extensions on or off in your custom search style.Note: Turning off extensions will impact your revenue performance.

Extension settingDescription
SitelinksTurn this setting off if you don’t want sitelinks to appear in your custom search style.
RatingsTurn this setting off if you don’t want ratings to appear in your custom search style.
Media linksTurn this setting off if you don’t want media links such as phone call links, app store links, map links, etc., to appear in your custom search style.
Additional informationTurn this setting off if you don’t want additional information such as political disclosures, price information, special highlights, etc., to appear in your custom search style.

Extensions

ExtensionWhat it does
SitelinkDisplays additional links to deeper content on an advertiser’s site beyond the main landing page. Sitelinks extend the value of ads by showcasing additional targeted and relevant links for users whose search queries have triggered these ads.
RatingDisplays user-submitted ratings information about sellers next to their ads. These reviews reflect users’ buying experience with these businesses, rather than their experience with particular products.
App (mobile only)Displays a link to directly download a mobile application from either the Google Play Store or the Apple App Store.
PriceDisplays a price or prices for some of an advertiser’s business offerings.
Click-to-Call (mobile only)Displays an action button to open the phone dialler and directly calls the advertiser.
LocationDisplays location information for an ad such as a map, an address, or the distance to an advertiser’s business.
Phone Number (desktop only)Displays a phone number which cannot be clicked.
Call to ActionDisplays a call-to-action button.

Custom Search Ads parameter descriptions

For advanced users we’ve provided this list of the currently supported custom search style parameters. The code you generate in AdSense contains all of the most commonly used parameter settings. There are two required parameters: pubId and query. AdSense provides the pubId but you must edit the code and pass a value for the query parameter. All of the other parameters are optional and are described below.

Parameter types

There are two types of parameters:

Here’s some example output from the code generator with two ad blocks. To configure this code, you must set the required query parameter in the pageOptions map (e.g., “query”: myQuery). This is all that’s required to start showing ads. You can also set optional page level parameters in the page level block and individual unit level parameters in the adblock1 and adblock2 maps.<div id=”afscontainer1″></div>
<div id=”afscontainer2″></div>

<script type=”text/javascript” charset=”utf-8″>

  // Page level parameters
  var pageOptions = {
    “pubId”: “partner-pub-1234567891234567”,
    “styleId”: “1234567890”,
    “query”: myQuery,
  };

  // Unit level parameters
  var adblock1 = {
    “container”: “afscontainer1”
  };

  var adblock2 = {
    “container”: “afscontainer2”
  };

  _googCsa(‘ads’, pageOptions, adblock1, adblock2);

</script>

Page level parameter descriptions

These parameters only need to be specified once per page. They affect all units on the page.

Required

ParameterDescription and examples
pubIdRequired
This is your AdSense client-ID. Your pubId is the part of your client-ID that comes after ‘partner-‘. For example, if your client-ID is ‘partner-test-property’, your pubId is ‘test-property’. This is standard protocol for CSA.Example:'pubId' : 'test-property'
queryRequired
This is the search query entered by the user. The value of the query parameter should be unencoded.Examples:'query' : 'flowers''query' : 'black & decker''query' : myQuery // where myQuery is a JavaScript variable containing the search query

Optional configuration settings

ParameterDescription and examples
adPageOptionalThe adPage parameter specifies the results page ads are being displayed on. This parameter is used when users navigate past the first page of search results. For example, if five ads are requested, and the adPage parameter is set to ‘2’, the returned ads will be the second page of five ads.
adsafeOptional
Specifies the filtering rules that Google should apply to ads matching the search query. The following are the valid settings for adsafe and the effect each value has on returned ads:'high' Returns family-safe ads. Does not return non-family-safe or adult sexual content ads.'medium' Returns family-safe and non-family-safe ads. Does not return adult sexual content ads.'low' Returns all types of ads.By default adsafe is set to ‘high’.Example:'adsafe': 'medium'
adtestOptional
The adtest parameter is used to indicate that a request for ads is a test. When the adtest parameter has a value of ‘on’, Google treats the request as a test and does not count the ad impressions or track the clickthrough results.When the adtest parameter has a value of ‘on’, you do not generate any revenue.Use this parameter when testing, but do not use it in production systems or you will not be paid for ads that you display.The default adtest value is ‘off’.Example:'adtest' : 'on'
channelOptional
You may include an AdSense for Search channel for tracking the performance of different pages. Use the unique channel ID you created in your AdSense account. Learn more about tracking ad performance with custom channels.

Multiple channels should be separated by the ‘+’ symbol.
 Examples:'channel' : 'testA' 'channel' : 'testA+testB'
hlOptional
This parameter identifies the language that the requested ads should target. The default value is ‘en’.Google supports all Google Ads API language codes.Advertisers specify the languages that their ads target. If you include this parameter in your request, Google only returns ads that are targeted for that language or targeted for all languages but it does not guarantee that the ad text will be in the specified language.Typically, you should set the hl parameter to the primary language of the page from which this parameter is sent.Examples:'hl' : 'es'
ieOptionalThe ie parameter sets the character encoding scheme that should be used to interpret the query string.The default ie value is ‘utf-8’.ValueStandard nameAssociated supported languageslatin1ISO-8859-1Western European (Catalan, Danish, Dutch, English, Finnish, French, German, Indonesian, Italian, Norwegian, Portuguese, Spanish, Swedish)latin2ISO-8859-2Eastern European (Croatian, Czech, Hungarian, Polish, Romanian, Serbian, Slovak, Slovenian)latin3ISO-8859-3 latin4ISO-8859-4Baltic (Estonian, Latvian, Lithuanian)cyrillicISO-8859-5Bulgarian, RussianarabicISO-8859-6 greekISO-8859-7GreekhebrewISO-8859-8Hebrewlatin5ISO-8859-9 latin6ISO-8859-10Icelandiceuc-jpEUC-JPJapaneseeuc-krEUC-KRKoreansjisShift_JISJapanesebig5Big5Traditional ChinesegbGB2312Simplified Chineseutf-8UTF-8All
oeOptionalThe oe parameter sets the character encoding scheme that Google should use to encode the text of the ads. While technically optional, it’s good practice to pass a value for this parameter.The default oe value is ‘utf-8’. Refer to the ie parameter for the full list of possible values.
personalizedAdsOptional
Specifies whether users have consented to allowing the publisher to share personal information with Google for the purpose of personalized advertising.true Returns query targeted ads and some ads that may be targeted with the user’s Google cookies. If the user is located in the European Union, the user must first consent to allowing your site to share personal information with Google for the purpose of personalized advertising.false Returns only query targeted ads. This will not return any ads that are targeted with the user’s Google cookies. If a user has declined consent for allowing your site to share personal information with Google for the purpose of personalized advertising, you must set this value to false.By default personalizedAds is set to ‘true’.Example:'personalizedAds': false

Unit level parameter descriptions

These parameters affect the way individual ad units on a page are presented to the user. Each parameter can be set individually for each ad unit.

Required

ParameterDescription and examples
containerRequired
The id of the empty ad container <div id='afscontainer1'></div> where the ad should appear.Example:'container' : 'afscontainer1'

Optional configuration settings

ParameterDescription and examples
maxTopOptionalUse this parameter to specify the number of ads to be shown on the top ad unit.This parameter is used in place of the number parameter. This ad unit should be wide enough so the first line of the ads doesn’t wrap. Using the maxTop parameter on any other placement on the page is a policy violation.Example:'maxTop' : 4
numberOptional
The number of ads which should appear in this unit. The default value is ‘2’.Example:'number' : 4
widthRequired
Specifies the width of the ad unit in pixels.Example:'width' : '700px'