rtcamp / amp-admanager Goto Github PK

Add support for layout with layout attribute.

https://amp.dev/documentation/components/amp-ad?referrer=ampproject.org

https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout?referrer=ampproject.org

Supported Layouts: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive

Add pipeline with needful phpcs checks

• Add needful tokens => @DevikVekariya
• Configure GH actions for the phpcs checks => @kiranpotphode

Seems necessary from this => #63 (comment)

Edit page was not getting loaded because of returning empty tag.

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

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.

• Field to add Network ID.
• Field to ask to load amp resources for non amp sites.

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"}']

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

• Create a setup for Php Unit Tests along with the documentation.

Acceptance Criteria:

• Each class and its method should pass though the Php Unit test case
• If any of the methods are ignored then, it should have proper docs with a reason to ignore it.
• It should have detailed documentation for the local setup of Unit tests and how to run it locally.

Can take a reference from here - rtCamp/login-with-google#19

Update category targeting and use category slug instead of name.

Its breaking Json because of spaces in category name.

Update content type - sanitize content type.

The issue on amp page, loading boilerplate script twice. check the runtime script is not registered or enqueued.

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>

Plugin structure

Restrict tablet ads to use the maximum width of 600px.

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.

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 -

• Enable/Disable Sticky Ad
• Adunit name for sticky ad (for example - /35096353/amptesting/formats/sticky)

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>

• AMP AdManager plugin: v1.0.0
• WordPress: 5.7

With the above test environment, on Global settings page o f plugin notice is shown.

https://www.ampproject.org/docs/reference/components/amp-ad#attributes

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 -

1. GPT library for Non-AMP pages.
2. AMP ads for AMP Pages.

Goal will be to Code once & deliver on both AMP and Non-AMP pages.

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 -

1. data-loading-strategy=prefer-viewability-over-views // Make this default value in function if not passed.
2. data-loading-strategy=1 // displays ad if its in 1st viewport.
3. data-loading-strategy=2 // displays ad if its in 2 viewports.
4. data-loading-strategy=3 // displays ad if its in 3 viewports.
   so on..

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

Slack discussion: https://rtcamp.slack.com/archives/C7VFLQZLJ/p1567512662016600?thread_ts=1567512309.015900&cid=C7VFLQZLJ

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)

Goal

Use a single function call to show 3 device specific ads (mobile, desktop, tablet).

Current Problem

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.

Solution

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

Steps -

1. Create a function to return 3 <amp-ad>. (proposed name- get_ads)
2. Auto calculate sizes for each breakpoint.
3. breakpoint-mobile, breakpoint-tablet, breakpoint-desktop

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>

In case of wrong / rare / unusual sizes -

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

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.

• add Shortcode usage snippet.
• add function usage to load Ad in a page.

Workflow:

• Every PR needs to be merged to develop branch first.
• Need to test on develop
• If the test goes good and QA approves then only create a PR against master.
• Need to plan a release with changelog.
• No PR will go to master directly

@sagarnasit

• Update Readme with the descriptive workflow
• update section for the contributors (steps as this repo is public)

@DevikVekariya

• Make the master branch protected
• Add rule for the PRs, to get minimum 1 approval to merge.