Skip to content

Commit

Permalink
Merge tag '1454455326712-canary' into release
Browse files Browse the repository at this point in the history
  • Loading branch information
cramforce committed Feb 3, 2016
2 parents 48b47db + 007a135 commit 748b19e
Show file tree
Hide file tree
Showing 154 changed files with 2,357 additions and 601 deletions.
6 changes: 5 additions & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,14 @@ script:
- gulp test --saucelabs --integration --compiled
# All unit tests with an old chrome (best we can do right now to pass tests
# and not start relying on new features).
- gulp test --saucelabs --oldchrome
# Disabled because it regressed. Better to run the other saucelabs tests.
# - gulp test --saucelabs --oldchrome
- gulp validator
branches:
only:
- master
- release
- canary
env:
global:
- NPM_CONFIG_PROGRESS="false"
30 changes: 30 additions & 0 deletions 3p/integration.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {a9} from '../ads/a9';
import {adreactor} from '../ads/adreactor';
import {adsense} from '../ads/adsense';
import {adtech} from '../ads/adtech';
import {plista} from '../ads/plista';
import {doubleclick} from '../ads/doubleclick';
import {facebook} from './facebook';
import {manageWin} from './environment';
Expand All @@ -35,12 +36,23 @@ import {twitter} from './twitter';
import {register, run} from '../src/3p';
import {parseUrl} from '../src/url';
import {assert} from '../src/asserts';
import {taboola} from '../ads/taboola';

/**
* Whether the embed type may be used with amp-embed tag.
* @const {!Object<string: boolean>}
*/
const AMP_EMBED_ALLOWED = {
taboola: true
};

register('a9', a9);
register('adreactor', adreactor);
register('adsense', adsense);
register('adtech', adtech);
register('plista', plista);
register('doubleclick', doubleclick);
register('taboola', taboola);
register('_ping_', function(win, data) {
win.document.getElementById('c').textContent = data.ping;
});
Expand All @@ -62,6 +74,9 @@ export function draw3p(win, data, configCallback) {
const type = data.type;
assert(win.context.location.originValidated != null,
'Origin should have been validated');

assert(isTagNameAllowed(data.type, win.context.tagName),
'Embed type %s not allowed with tag %s', data.type, win.context.tagName);
if (configCallback) {
configCallback(data, data => {
assert(data, 'Expected configuration to be passed as first argument');
Expand Down Expand Up @@ -257,3 +272,18 @@ export function parseFragment(fragment) {
}
return json ? JSON.parse(json) : {};
}

/**
* Not all types of embeds are allowed to be used with all tag names on the
* AMP side. This function checks whether the current usage is permissible.
* @param {string} type
* @param {string|undefined} tagName The tagName that was used to embed this
* 3p-frame.
* @return {boolean}
*/
export function isTagNameAllowed(type, tagName) {
if (tagName == 'AMP-EMBED') {
return !!AMP_EMBED_ALLOWED[type];
}
return true;
}
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ AMP HTML works by including the AMP JS library and adding a bit of boilerplate t
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
Expand Down
25 changes: 4 additions & 21 deletions ads/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,36 +83,19 @@ Example usage:
Ads can call the special API
`window.context.requestResize(width, height)` to send a resize request.

Example of resize request:
```javascript
window.parent.postMessage({
sentinel: 'amp-3p',
type: 'embed-size',
height: document.body.scrollHeight
}, '*');
```

Once this message is received the AMP runtime will try to accommodate this request as soon as
Once the request is processed the AMP runtime will try to accommodate this request as soon as
possible, but it will take into account where the reader is currently reading, whether the scrolling
is ongoing and any other UX or performance factors.

Based one whether the AMP runtime was able to satisfy the resize request,
the runtime will also send out a `embed-size-changed` or `embed-size-denied` message accordingly. The ad can listen to these messages and have it's own overflow element within and repeat request on tap. In that case AMP runtime will definitely allow size change due to user action.

Ads can call the special API `window.context.onResizeSuccess` to get a callback in case a resize request was successful.
Ads can observe wehther resize request were successful using the `window.context.onResizeSuccess` and `window.context.onResizeDenied` methods.

Example
```javascript
var unlisten = window.context.onResizeSuccess(function(requestedHeight) {
// Hide any overflow elements that were shown.
// The requestedHeight argument may be used to check which height change the request corresponds to.
});
```

Ads can call the special API `window.context.onResizeDenied` to get a callback in case a resize request was denied.

Example
```javascript
var unlisten = window.context.onResizeDenied(function(requestedHeight) {
// Show the overflow element and send a window.context.requestResize(width, height) when the overflow element is clicked.
// You may use the requestedHeight to check which height change the request corresponds to.
Expand All @@ -127,10 +110,10 @@ Here are some factors that affect how fast the resize will be executed:
- Whether the resize is requested for an ad below the viewport or above the viewport.


### Minimizing HTTP requests
### Optimizing ad performance

#### JS reuse across iframes
To allow ads to bundle HTTP requests across multiple ad units on the same page the object `window.context.master` will contain the window object of the iframe being elected master iframe for the current page.
To allow ads to bundle HTTP requests across multiple ad units on the same page the object `window.context.master` will contain the window object of the iframe being elected master iframe for the current page. The `window.context.isMaster` property is `true` when the current frame is the master frame.

#### Preconnect and prefetch
Add the JS URLs that an ad **always** fetches or always connects to (if you know the origin but not the path) to [_config.js](_config.js).
Expand Down
1 change: 1 addition & 0 deletions ads/_config.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export const adPrefetch = {
export const adPreconnect = {
adreactor: 'https://adserver.adreactor.com',
adsense: 'https://googleads.g.doubleclick.net',
taboola: 'https://cdn.taboola.com',
doubleclick: [
'https://partner.googleadservices.com',
'https://securepubads.g.doubleclick.net',
Expand Down
48 changes: 48 additions & 0 deletions ads/plista.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/**
* Copyright 2015 The AMP HTML Authors. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS-IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import {loadScript, checkData} from '../src/3p';

/**
* @param {!Window} global
* @param {!Object} data
*/
export function plista(global, data) {
checkData(data, [
'publickey', 'widgetname', 'urlprefix',
'item', 'geo', 'categories', 'countrycode'
]);
const div = global.document.createElement('div');
div.setAttribute('data-display', 'plista_widget_' + data.widgetname);
// container with id "c" is provided by amphtml
global.document.getElementById('c').appendChild(div);
window.PLISTA = {
publickey: data.publickey,
widgets: [{
name: data.widgetname,
pre: data.urlprefix
}],
item: data.item,
geo: data.geo,
categories: data.categories,
noCache: true,
useDocumentReady: false,
dataMode: 'data-display'
};

// load the plista modules asynchronously
loadScript(global, 'https://static' + (data.countrycode ? '-' + encodeURIComponent(data.countrycode) : '') + '.plista.com/async.js');
}
67 changes: 67 additions & 0 deletions ads/plista.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!---
Copyright 2015 The AMP HTML Authors. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS-IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

# plista

## Example

### Basic

```html
<amp-ad width=300 height=300
type="plista"
data-countrycode="de"
data-publickey="e6a75b42216ffc96b7ea7ad0c94d64946aedaac4"
data-widgetname="iAMP"
data-categories="politics"
>
```

### With article information

```html
<amp-ad width=300 height=300
type="plista"
data-countrycode="de"
data-publickey="e6a75b42216ffc96b7ea7ad0c94d64946aedaac4"
data-widgetname="iAMP"
data-geo="de"
data-urlprefix=""
data-categories="politics"
json='{"item":{"objectid":"1067327","url":"http://www.plista.com/article/a-1067337.html","updated_at":1449938206}}'
>
```

## Configuration

For semantics of configuration, please see [ad network documentation](https://goo.gl/nm9f41).

Supported parameters:

- data-countrycode
- data-publickey
- data-widgetname
- data-geo
- data-urlprefix
- data-categories

Supported via `json` attribute:

- item

## Layout

Width and height are optional. You can use different layout types with plista.
74 changes: 74 additions & 0 deletions ads/taboola.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/**
* Copyright 2015 The AMP HTML Authors. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS-IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import {loadScript, validateDataExists, validateExactlyOne} from '../src/3p';

/**
* @param {!Window} global
* @param {!Object} data
*/
export function taboola(global, data) {
// do not copy the following attributes from the 'data' object
// to _tablloa global object
const blackList = ['height', 'initialWindowHeight', 'initialWindowWidth',
'type', 'width', 'placement', 'mode'];

// ensure we have vlid publisher, placement and mode
// and exactly one page-type
validateDataExists(data, ['publisher', 'placement', 'mode']);
validateExactlyOne(data, ['article', 'video', 'photo', 'search', 'category',
'homepage', 'others']);

// setup default values for referrer and url
const params = {
referrer: data.referrer || global.context.referrer,
url: data.url || global.context.canonicalUrl
};

// copy none blacklisted attribute to the 'params' map
Object.keys(data).forEach(k => {
if (blackList.indexOf(k) === -1) {
params[k] = data[k];
}
});

// push the two object into the '_taboola' global
(global._taboola = global._taboola || []).push([{
viewId: global.context.pageViewId,
publisher: data.publisher,
placement: data.placement,
mode: data.mode,
framework: 'amp',
container: 'c'
},
params]);

// install observation on entering/leaving the view
global.context.observeIntersection(function(changes) {
changes.forEach(function(c) {
if (c.intersectionRect.height) {
global._taboola.push({
visible: true,
rects: c,
placement: data.placement
});
}
});
});

// load the taboola loader asynchronously
loadScript(global, `https://cdn.taboola.com/libtrc/${encodeURIComponent(data.publisher)}/loader.js`);
}
51 changes: 51 additions & 0 deletions ads/taboola.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!---
Copyright 2015 The AMP HTML Authors. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS-IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

# Taboola

## Example

### Basic

```html
<amp-embed width=100 height=283
type=taboola
layout=responsive
heights="(min-width:1907px) 39%, (min-width:1200px) 46%, (min-width:780px) 64%, (min-width:480px) 98%, (min-width:460px) 167%, 196%"
data-publisher="amp-demo"
data-mode="thumbnails-a"
data-placement="Ads Example"
data-article="auto">
</amp-embed>
```

## Configuration

For semantics of configuration, please see ad network documentation.

Supported parameters:

- data-publisher
- data-placement
- data-mode
- data-article
- data-video
- data-photo
- data-home
- data-category
- data-others
- data-url
- data-referrer
Loading

0 comments on commit 748b19e

Please sign in to comment.