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 3 step process:
Step 1: Create your custom search style in AdSense
After signing in, expand Ads for shopping then click Search styles. From here you can create a new style or update an existing one.
Step 2: Configure code
Click Get Code
.
Configure your ad containers to match the ad containers on your search page.
Step 3: 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. The code for ad unit 1 will contain the settings for all ad units on the page. Additional ad units will only require placing the corresponding ad unit <div>
on the page where ads should appear.
AdSense for Shopping examples
A full working example is shown below. You may open this example in new tab. Remember to update the query and put your own client ID and style ID.
<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', 'styleId': '1773514688' }; var afshblock = { 'container' : 'afshcontainer', 'width' : 500, 'height' : 400 }; _googCsa('plas', pageOptions, afshblock); </script> </body> </html>