kessiler / google-adsense

Web Component wrapper for Google Adsense code using Polymer

<google-adsense>

==============

Web Component wrapper for Google Adsense code using Polymer.

Maintained by Kessiler Rodrigues.

Demo

Check it live!

Install

Install the component using Bower:

$ bower install google-adsense --save

Or download as ZIP.

Usage

1. Import Web Components' polyfill:

   <script src="bower_components/platform/platform.js"></script>

2. Import Google Adsense custom element:

   <link rel="import" href="bower_components/google-adsense/dist/google-adsense.html">

3. Start using it!

   <google-adsense></google-adsense>

Options

Attribute	Options	Default	Description
client	int	8949501714982201	your id from ad.
slot	int	2732884579	number of slot ad.
width	int	728	width size of ad.
height	int	90	height size of ad.

Responsive

To make the ad responsive, you must create media queries for the class "ads-responsive".

• Example

  @media(min-width: 320px) { .ads-responsive { width: 300px; height: 250px; } }
  @media(min-width: 500px) { .ads-responsive { width: 468px; height: 60px; } }
  @media(min-width: 800px) { .ads-responsive { width: 728px; height: 90px; } }

Development

In order to run it locally you'll need to fetch some dependencies and a basic server setup.

• Install Bower & Grunt:

  $ [sudo] npm install -g bower grunt-cli

• Install local dependencies:

  $ bower install && npm install

• To test your project, start the development server and open http://localhost:8000.

  $ grunt server

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

License

MIT License

google-adsense's Issues

Not working in my site

I always get this error:

Uncaught Error: adsbygoogle.push(): All ins elements in the DOM with class=adsbygoogle already have ads in them.

Is this element still compatible with the newest version of polymer?

The Demo Page looks empty

The Demo Page http://kessiler.github.io/google-adsense/ looks empty

although I can see from Chrome Developer Tools that Google scripts where being downloaded and no error.

Also using inspect elements shows a 728x90 box, I assume it's working but not displaying any Ads

May be you can configure in Adsense to show your own banner when they don't have ads to serve to make the demo looks working.