Web

Important: Review the individual terms of your contract before using this code on your site.

Implementing AdSense for Shopping (AFSh) on your site is a 4 step process:

Step 1: Decide which AFSh ad format you want to use

AFSh supports the following ad formats:

  • Multiple Format - The multiple format returns multiple product ads side by side based on the size of the AFSh ad block.
  • Single Format - The single format returns a single product with multiple retailers selling that product.

You can choose which format to use by setting the first parameter in your _googCsa call.

Multiple Format Example:

_googCsa('plas', pageOptions, afshblock);
Single Format Example:
_googCsa('single-product', pageOptions, afshblock);

Step 2: Customize AFSh page and ad unit options using the AFSh Code Generator

First configure page-level options. These options apply to ad unit on your page. Next, configure options for AFSh ad unit.

Key Parameters:

Name Parameter Description
Client-ID pubId This should be a valid client-ID. Your AFSh pubId is the part of your client-ID that comes after 'partner-'. For example, if your client-ID is 'partner-vert-pla-test-srp', your pubId is 'vert-pla-test-srp'.
Query query For Multiple Format
This should be dynamic based on your page. This variable targets the ads and therefore should always match what the user on your site has just performed a search for.
GTIN gtin For Single Format
This should dynamically set to match the product on your page. This variable determines which product will show in the ads and must match the one shown on the contents of the page.
Width width Specifies the width of the ad unit in pixels. Note: auto or % values will not work.
Height height Specifies the height of the ad unit in pixels. Note: auto or % values will not work.

Step 3: Configure additional page and unit level options

The most commonly used features are available in the code generator. The reference section (Multiple , Single) contains all page level options and unit level options.

Step 4: Implement the code

Copy the code from the code generator and paste it on your page, remembering to update the query parameter. The code generated in the head tag should be placed in the head tag on your site for the ads to load properly.

AdSense for Shopping Examples

A full working example is shown below. You may open this example in new tab here. Remember to update the query and put your own client-Id.

Multiple Format
<html>
<head>

<script async="async" src="https://www.google.com/adsense/search/ads.js"></script>
<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>

</head>

<body>

<p>Shopping Search Results</p>
<div id="afshcontainer"></div>

<script type="text/javascript" charset="utf-8">
var pageOptions = {
'pubId' : 'test client ID',// Enter your own client-ID here!
'query' : 'flowers'
};

var afshblock = {
'container' : 'afshcontainer',
'width' : 500,
'height' : 400
};

_googCsa('plas', pageOptions, afshblock);
</script>

</body>
</html>
Single Format
<html>
<head>

<script async="async" src="https://www.google.com/adsense/search/ads.js"></script>
<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>

</head>

<body>

<p>Shopping Search Results</p>
<div id="afshcontainer"></div>

<script type="text/javascript" charset="utf-8">
var pageOptions = {
'pubId' : 'test client ID',// Enter your own client-ID here!
'gtin' : 'product gtin' // Enter the product gtin here!
};

var afshblock = {
'container' : 'afshcontainer',
'width' : 500,
'height' : 400
};

_googCsa('single-product', pageOptions, afshblock);
</script>

</body>
</html>