Google AdSense HTML5 Web Component

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

The HTML5 Web Component for today is a wrapper for Google AdSense ad blocks as a custom tag with a few HTML attributes, methods and accessors.

thumb

Before you Start Using It

  1. This demo page should be deployed on a web server. HTML5 WebComponents do not work from the local file system.
  2. Your ad blocker should be disabled.
  3. You need to be registered with Google AdSense and have a valid client ID for their service.
  4. You need to create ads in Google AdSense.
  5. In the code below replace the client="XX-XXX-XXXXXXXXXXXXXXXX" with your Google AdSense ID (the value of the data-ad-client attribute in the conventional AdSense tag).
  6. In the code below replace the slot="XXXXXXXXXXXX" with your Google AdSense ID (the value of the data-ad-slot attribute in the conventional AdSense tag).
  7. Make sure you are connected to the Internet.
  8. Reload the page to see your ads.
  9. Proceed to the documentation included in the distribution.

Demo and Download

Check and download AcidJs.XAdsByGoogle here.

The HTML

[sourcecode language=”html”]
<acidjs-xadsbygoogle width="320" height="100" client="YOUR_ADSENSE_PUBLISHER_ID" slot="SLOT_ID"></acidjs-xadsbygoogle>
<acidjs-xadsbygoogle width="728" height="90" client="YOUR_ADSENSE_PUBLISHER_ID" slot="SLOT_ID"></acidjs-xadsbygoogle>
<acidjs-xadsbygoogle width="300" height="250" client="YOUR_ADSENSE_PUBLISHER_ID" slot="SLOT_ID"></acidjs-xadsbygoogle>
[/sourcecode]

Attributes

Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

How to set/get an attribute:

[sourcecode language=”javascript”]
// JavaScript example
// get
document.querySelector("#ad-01").getAttribute("width");
// set
document.querySelector("#ad-01").setAttribute("width", 200);
// jQuery example
// get
$("#ad-01").attr("width");
// set
$("#ad-01").attr("width", 200);
[/sourcecode]

Accessors

[sourcecode language=”javascript”]
// JavaScript getter
document.querySelector("#ad-01").config; // returns {"width": WIDTH, "height": HEIGHT, "client": CLIENT, "slot"": SLOT};
// JavaScript setter
document.querySelector("#ad-01").config = {"width": 200, "height": 200, "client": "ca-pub-4259822914193810", "slot": 1416253888};
// jQuery getter
$("#ad-01").get(0).config; // returns {"width": WIDTH, "height": HEIGHT, "client": CLIENT, "slot"": SLOT}
// jQuery setter
$("#ad-01").get(0).config = {"width": 200, "height": 200, "client": "ca-pub-4259822914193810", "slot": 1416253888}
[/sourcecode]

Methods

All standard JavaScript methods are supported, plus the component-specific:

[sourcecode language=”javascript”]
// JavaScript example
document.querySelector("#ad-01").init();
// jQuery example
$("#ad-01").get(0).init();
[/sourcecode]

[sourcecode language=”javascript”]
// JavaScript example
document.querySelector("#ad-01").configure({"width": "200", "height": "200", "client": "ca-pub-4259822914193810", "slot": "1416253888"});
// jQuery example
$("#ad-01").get(0).configure({"width": "200", "height": "200", "client": "ca-pub-4259822914193810", "slot": "1416253888"});
[/sourcecode]

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Categories and Tags
Links

© 2006 - 2018 Martin Ivanov