rtcamp / amp-admanager Goto Github PK
View Code? Open in Web Editor NEWEasy and hassle free Google Admanager amp-ad tags integration for all WordPress sites. (AMP and Non-AMP)
Easy and hassle free Google Admanager amp-ad tags integration for all WordPress sites. (AMP and Non-AMP)
Add support for amp sticky ad for mobile - https://amp.dev/documentation/components/amp-sticky-ad/
We can add an option in the plugin options page -
Enabling this will add amp-sticky-ad that shows at the footer of page.
Out put this markup with dynamic values from options page -
<amp-sticky-ad layout="nodisplay">
<amp-ad
width="320"
height="50"
type="doubleclick"
data-slot="/35096353/amptesting/formats/sticky"
>
</amp-ad>
</amp-sticky-ad>
Edit page was not getting loaded because of returning empty tag.
amp-ad has support for data-loading-strategy -
data-loading-strategy="prefer-viewability-over-views"
This can have multiple values, so add support for this in template function.
Possibly like this -
$attr = [
'ad-unit' => '<ad-unit-name>',
'sizes' => '320x50,300x100',
'layout' => 'responsive',
'data-loading-strategy' => 'prefer-viewability-over-views'
];
AMP_AdManager\AMP_AdManager::get_amp_ad( $attr, true );
Possible values -
data-loading-strategy=prefer-viewability-over-views
// Make this default value in function if not passed.data-loading-strategy=1
// displays ad if its in 1st viewport.data-loading-strategy=2
// displays ad if its in 2 viewports.data-loading-strategy=3
// displays ad if its in 3 viewports.Ref- https://amp.dev/documentation/components/amp-ad?referrer=ampproject.org#data-loading-strategy-%28optional%29
https://medium.com/ampfuel/optimize-your-amp-pages-for-high-ad-viewability-rate-or-high-ads-served-311f6b539c73
Use a single function call to show 3 device specific ads (mobile, desktop, tablet).
For 3 breakpoints we currently need to call get_amp_ad
function 3 times.
Need to output ads in single call and make size calculations automatic.
For size calculations use this - https://support.google.com/adsense/answer/6002621?hl=en
$attr = [
'width' => '<slot-width>',
'height' => '<slot-height>',
'ad-unit' => '<ad-unit-name>',
'min' => '',
'max' => '499',
'sizes' => '320x50,300x100',
'layout' => 'responsive',
'custom-targeting' => 'key1:value1, key2:value2'
];
AMP_AdManager\AMP_AdManager::get_amp_ad( $attr, true );
<amp-ad>
. (proposed name- get_ads
)Expected attributes -
$attr = [
'ad-unit' => '<ad-unit-name>',
'sizes' => '320x50,300x100,468x60,980x250,970x90',
'custom-targeting' => 'key1:value1, key2:value2'
];
AMP_AdManager\AMP_AdManager::get_amp_ad( $attr, true );
Expected output -
3 tags with auto calculated breakpoints.
Desktop - (sizes > 728x90)
<amp-ad width="980" height="250" media="(min-width: 800px)" type="doubleclick" data-slot="<ad-unit-name>" data-multi-size="980x250,970x90" data-multi-size-validation="false" data-loading-strategy="prefer-viewability-over-views" layout="fixed"></amp-ad>
Tablet - (sizes > 468x60)
<amp-ad width="468" height="60" media="(min-width: 500px) and (max-width: 799px)" type="doubleclick" data-slot="<ad-unit-name>" data-multi-size="468x60" data-multi-size-validation="false" data-loading-strategy="prefer-viewability-over-views" layout="fixed"></amp-ad>
Mobile - (sizes > 300)
<amp-ad width="320" height="100" media="(max-width: 499px)" type="doubleclick" data-slot="<ad-unit-name>" data-multi-size="320x50,300x100" data-multi-size-validation="false" data-loading-strategy="prefer-viewability-over-views" layout="fixed"></amp-ad>
Expected attributes -
$attr = [
'ad-unit' => '<ad-unit-name>',
'mobile-sizes' => '300x100',
'tablet-sizes' => '468x60',
'desktop-sizes' => '728x90',
'custom-targeting' => 'key1:value1, key2:value2'
];
AMP_AdManager\AMP_AdManager::get_ads( $attr, true );
Since there will be latency issue when using AMP ads (library) on Non-AMP pages, we shall use default GPT implementation recommended by Google - https://developers.google.com/doubleclick-gpt/samples/display-test-ad
We already have some internal library that we can merge in this plugin and make changes to use -
Goal will be to Code once
& deliver on both AMP and Non-AMP pages.
Workflow:
Add support for layout with layout
attribute.
https://amp.dev/documentation/components/amp-ad?referrer=ampproject.org
Supported Layouts: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive
amp-ad
supports ad refresh now. https://github.com/ampproject/amphtml/pull/9535/files#diff-9b6ef3b0d9f6aa768246cf8adedf1461R102-R119
It will be worth adding option for ad-refresh to plugin code by specifying interval.
For example -
ad-refresh=30
- will refresh given ad slot after every 30 seconds.
By default amp-ad
supports data-enable-refresh=refresh_interval
attribute.
Acceptance Criteria:
Can take a reference from here - rtCamp/login-with-google#19
Plugin structure
This is getting complex
[ampad width="728" height="90" ad-unit="GK_Header" breakpoint='{"breakpoint1":{"min":"","max":"499","sizes":"320x50,300x100"},"breakpoint2":{"min":"500","max":"799","sizes":"468x60"},"breakpoint3":{"min":"800","max":"","sizes":"728x90,600x90,1028x90"}}']
Now we will support only one ad for one breakpoint. so to add ad for other breakpoints we need to add another shortcode.
[ampad width="300" height="50" ad-unit="GK_Header" breakpoint='{"min":"","max":"499","sizes":"320x50,300x100,300x50"}']
Table sizes auto calculation should include 300x250, 300x100, 300x50, 320x100, 320x50 etc.
In short all sizes mentioned in sizes
attribute which atleast 300px wide to be included in Tablet sizes.
Breakpoint stays same (799 < Size > 500
)
To use AMP as a framework on non-amp pages:
Add amp-runtime-for-non-amp.php file with following:
// AMP Runtime.
$handle = 'amp-runtime';
$wp_scripts->add(
$handle,
'https://cdn.ampproject.org/v0.js',
array(),
null
);
$wp_scripts->add_data( $handle, 'amp_script_attributes', array(
'async' => true,
) );
Boilerplate -
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
Restrict tablet ads to use the maximum width of 600px.
Many sites use Programmatic header bidding like prebid.js etc. that callouts multiple ad request and fetches high paying ads by doing quick auction.
AMP RTC Config enables us to use header bidding -
https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/rtc-documentation.md
Some references -
https://medium.com/ampfuel/better-than-header-bidding-amp-rtc-fc54e80f3999
http://prebid.org/formats/amp.html
Add support for custom targeting variables key:value
to merge into the default targeting variable.
It can be something like this -
[ampad targeting="key1:value1, key2:value2" width="<slot-width>" height="<slot-height>" ad-unit="<ad-unit-name>" min="" max="499" sizes="320x50,300x100,300x50"]
Add pipeline with needful phpcs checks
Seems necessary from this => #63 (comment)
According to this - https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad-network-doubleclick-impl/sra.md
In order to use this feature, add the following meta tag to the head of the AMP page: <meta name="amp-ad-doubleclick-sra"/>
However, this will not work in case of ad-refresh
.
We have updated PHP template to use a single function call to output am ads in #38.
Shortcode class need to be updated to leverage single function call usage.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.