HTML5, CSS3 & JS Experiments

By Martin Ivanov

Google AdSense Tag

Google AdSense ad blocks wrapped as HTML5 Web Components with custom attributes, small API, getters and setters.

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

Demo

The ad sizes shown below are just for this demo. Any size could be set or selected from Google's AdSense recommended ad sizes.

Large Mobile Banner (320 x 100)

Leaderboard (728 x 90)

Medium Rectangle (300 x 250)

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XAdsByGoogle/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XAdsByGoogle/classes/XAdsByGoogle.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            <p>The ad sizes shown below are just for this demo. Any size could be set or 
                selected from Google's AdSense recommended ad sizes.</p>
            
            <h4>Large Mobile Banner (320 x 100)</h4>
            <acidjs-xadsbygoogle width="320" height="100" client="ca-pub-4259822914193810" slot="1416253888" id="ad-01"></acidjs-xadsbygoogle>
            
            <h4>Leaderboard (728 x 90)</h4>
            <acidjs-xadsbygoogle width="728" height="90" client="ca-pub-4259822914193810" slot="7218797485" id="ad-02"></acidjs-xadsbygoogle>
            
            <h4>Medium Rectangle (300 x 250)</h4>
            <acidjs-xadsbygoogle width="300" height="250" client="ca-pub-4259822914193810" slot="4771200687" id="ad-03"></acidjs-xadsbygoogle>