Google AdSense HTML5 Web Component

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.

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:

• width – Required attribute. Width of the ad block in pixels.
• height – Required attribute. Height of the ad block in pixels.
• client – Required attribute. Your AdSense Publisher ID (the value of the data-ad-client attribute in the conventional AdSense tag).
• slot – Required attribute. AdSense slot ID (the value of the data-ad-slot attribute in the conventional AdSense tag).

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

• config – Gets/sets the DTO of the tag.

[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:

• init() – Re(initialize) an ad block.

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

• configure(config) – Set new DTO to the ad block and re-initialize it.

[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.