From dcd2152e89364c1edd525bc828d606ba01dd5fe2 Mon Sep 17 00:00:00 2001
From: Frankie Fu <ffu@google.com>
Date: Fri, 8 Dec 2017 10:24:17 -0800
Subject: [PATCH] merge #143, #144 and #145 from master
---
index.html | 4 ++
src/ads/a9.html | 26 -------------
src/ads/demo/index.html | 36 ------------------
src/lazy-resources.js | 1 +
src/news-app.js | 31 +++++++++++++++
src/news-article.js | 8 ++--
src/news-gpt-ad.js | 38 +++++++++++++++++++
src/news-iframe.js | 84 -----------------------------------------
src/news-list.js | 8 ++--
9 files changed, 84 insertions(+), 152 deletions(-)
delete mode 100644 src/ads/a9.html
delete mode 100644 src/ads/demo/index.html
create mode 100644 src/news-gpt-ad.js
delete mode 100644 src/news-iframe.js
diff --git a/index.html b/index.html
index 2e986e00..42186ec4 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,10 @@
<title>NEWS</title>
<link rel="shortcut icon" sizes="32x32" href="images/news-icon-32.png">
+ <meta name="twitter:card" content="summary">
+ <meta name="twitter:site" content="@Polymer">
+ <meta property="og:type" content="website">
+ <meta property="og:site_name" content="NEWS">
<meta name="theme-color" content="#000">
<link rel="manifest" href="manifest.json">
diff --git a/src/ads/a9.html b/src/ads/a9.html
deleted file mode 100644
index 65234daf..00000000
--- a/src/ads/a9.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--
-@license
-Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<!doctype html>
-<head>
- <meta charset="utf-8">
- <meta name="robots" content="noindex">
-</head>
-<body style="margin: 0; overflow: hidden;">
- <div style="position:absolute; top:0; left:0; bottom:0; right:0;">
- <script>
- window['aax_size'] = '300x250';
- window['aax_pubname'] = 'abc123';
- window['aax_src'] = '302';
- </script>
- <script src="https://c.amazon-adsystem.com/aax2/assoc.js"></script>
- </div>
-</body>
-</html>
diff --git a/src/ads/demo/index.html b/src/ads/demo/index.html
deleted file mode 100644
index 12fbbda2..00000000
--- a/src/ads/demo/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--
-@license
-Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
- <title></title>
-
- <script type="module" src="../../news-iframe.js"></script>
-
- <style>
-
- news-iframe {
- width: 300px;
- height: 250px;
- }
-
- </style>
-
-</head>
-<body>
-
- <h2>a9</h2>
- <news-iframe src="/src/ads/a9.html"></news-iframe>
-
-</body>
-</html>
diff --git a/src/lazy-resources.js b/src/lazy-resources.js
index 2ed481fa..f977516f 100644
--- a/src/lazy-resources.js
+++ b/src/lazy-resources.js
@@ -1,6 +1,7 @@
import './news-icons.js';
import './news-analytics.js';
import './news-drawer.js';
+import './news-gpt-ad.js';
import './news-network-warning.js';
import './news-snackbar.js';
diff --git a/src/news-app.js b/src/news-app.js
index e2105b5f..fc341ef6 100644
--- a/src/news-app.js
+++ b/src/news-app.js
@@ -260,6 +260,37 @@ class NewsApp extends Element {
// Response by a11y announcing the section and syncronizing the category.
_updateDocumentTitle(page, categoryTitle, articleHeadline, appTitle) {
document.title = (page === 'list' ? categoryTitle : articleHeadline) + ' - ' + appTitle;
+ if (page === 'list') {
+ this._setPageMetadata(categoryTitle, null);
+ } else {
+ this._setPageMetadata(articleHeadline, this.article);
+ }
+ }
+
+ _setPageMetadata(description, article) {
+ let image = article ? article.imageUrl : 'images/news-icon-128.png';
+
+ // Set open graph metadata
+ this._setMeta('property', 'og:title', document.title);
+ this._setMeta('property', 'og:description', description || document.title);
+ this._setMeta('property', 'og:url', document.location.href);
+ this._setMeta('property', 'og:image', this.baseURI + image);
+
+ // Set twitter card metadata
+ this._setMeta('property', 'twitter:title', document.title);
+ this._setMeta('property', 'twitter:description', description || document.title);
+ this._setMeta('property', 'twitter:url', document.location.href);
+ this._setMeta('property', 'twitter:image:src', this.baseURI + image);
+ }
+
+ _setMeta(attrName, attrValue, content) {
+ let element = document.head.querySelector(`meta[${attrName}="${attrValue}"]`);
+ if (!element) {
+ element = document.createElement('meta');
+ element.setAttribute(attrName, attrValue);
+ document.head.appendChild(element);
+ }
+ element.setAttribute('content', content || '');
}
_refreshData() {
diff --git a/src/news-article.js b/src/news-article.js
index 409d3a1a..0e58211c 100644
--- a/src/news-article.js
+++ b/src/news-article.js
@@ -2,7 +2,6 @@ import { Element } from '../node_modules/@polymer/polymer/polymer-element.js';
import '../node_modules/@polymer/app-route/app-route.js';
import '../node_modules/@polymer/iron-icon/iron-icon.js';
import './news-article-cover.js';
-import './news-iframe.js';
import './news-side-list.js';
import { afterNextRender } from '../node_modules/@polymer/polymer/lib/utils/render-status.js';
import { scroll } from '../node_modules/@polymer/app-layout/helpers/helpers.js';
@@ -74,7 +73,8 @@ class NewsArticle extends Element {
margin-bottom: 32px;
}
- news-iframe {
+ news-gpt-ad {
+ display: block;
width: 300px;
height: 250px;
}
@@ -163,7 +163,9 @@ class NewsArticle extends Element {
<aside>
<div class="ad-container">
- <news-iframe src="//rcm-na.amazon-adsystem.com/e/cm?o=1&p=12&l=ur1&f=ifr"></news-iframe>
+ <news-gpt-ad id="ad_slot_2"
+ ad-unit-path="/6355419/Travel/Europe/France/Paris"
+ ad-width="300" ad-height="250"></news-gpt-ad>
</div>
<a href="#" class="share-link" aria-label="Send by email">
<iron-icon icon="mail"></iron-icon> Email
diff --git a/src/news-gpt-ad.js b/src/news-gpt-ad.js
new file mode 100644
index 00000000..5223cf22
--- /dev/null
+++ b/src/news-gpt-ad.js
@@ -0,0 +1,38 @@
+let initGptScript;
+function loadGpt() {
+ if (!initGptScript && !window.googletag) {
+ initGptScript = true;
+ let script = document.createElement('script');
+ script.async = true;
+ script.type = 'text/javascript';
+ script.src = '//www.googletagservices.com/tag/js/gpt.js';
+ document.head.appendChild(script);
+ }
+}
+
+class NewsGptAd extends HTMLElement {
+ connectedCallback() {
+ var elem = this;
+ var adUnitPath = this.getAttribute('ad-unit-path');
+ var w = parseInt(this.getAttribute('ad-width'), 10);
+ var h = parseInt(this.getAttribute('ad-height'), 10);
+ var id = this.id;
+
+ if (!adUnitPath || !w || !h || !id) {
+ console.warn('news-gpt-ad missing required attribute', this);
+ return;
+ }
+
+ loadGpt();
+ let win = window;
+ win.googletag = win.googletag || {};
+ win.googletag.cmd = win.googletag.cmd || [];
+ win.googletag.cmd.push(function() {
+ googletag.defineSlot(adUnitPath, [w, h], id).addService(googletag.pubads());
+ googletag.enableServices();
+ googletag.display(elem);
+ });
+ }
+}
+
+customElements.define('news-gpt-ad', NewsGptAd);
diff --git a/src/news-iframe.js b/src/news-iframe.js
deleted file mode 100644
index bdce3da8..00000000
--- a/src/news-iframe.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Element } from '../node_modules/@polymer/polymer/polymer-element.js';
-
-class NewsIframe extends Element {
- static get template() {
- return `
- <style>
-
- :host {
- display: inline-block;
- position: relative;
- overflow: hidden;
- }
-
- iframe {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border: 0;
- }
-
- </style>
-`;
- }
-
- static get is() { return 'news-iframe'; }
-
- static get properties() { return {
-
- src: String,
-
- _iframeCreated: Boolean
-
- }}
-
- static get observers() { return [
- '_srcChanged(src, _iframeCreated)'
- ]}
-
- connectedCallback() {
- super.connectedCallback();
- if ('IntersectionObserver' in window) {
- this._io = new IntersectionObserver(this._createIframe.bind(this));
- this._io.observe(this);
- } else {
- // Intersection Observer is not available, so just create the iframe
- // after a bit of a delay.
- window.setTimeout(this._createIframe.bind(this), 100);
- }
- }
-
- disconnectedCallback() {
- super.disconnectedCallback();
- this._removeIntersectionObserver();
- }
-
- _removeIntersectionObserver() {
- if (this._io) {
- this._io.disconnect();
- this._io = null;
- }
- }
-
- _createIframe() {
- this._removeIntersectionObserver();
- if (this._iframe) {
- return;
- }
- this._iframe = document.createElement('iframe');
- this.root.appendChild(this._iframe);
- this._iframeCreated = true;
- }
-
- _srcChanged(src) {
- if (this._iframe) {
- this._iframe.src = src;
- }
- }
-}
-
-customElements.define(NewsIframe.is, NewsIframe);
diff --git a/src/news-list.js b/src/news-list.js
index 9f1d9b12..b8b38f5a 100644
--- a/src/news-list.js
+++ b/src/news-list.js
@@ -3,7 +3,6 @@ import '../node_modules/@polymer/app-route/app-route.js';
import '../node_modules/@polymer/app-layout/app-grid/app-grid-style.js';
import { Debouncer } from '../node_modules/@polymer/polymer/lib/utils/debounce.js';
import { timeOut } from '../node_modules/@polymer/polymer/lib/utils/async.js';
-import './news-iframe.js';
import './news-list-featured-item.js';
import './news-list-item.js';
import './news-side-list.js';
@@ -58,7 +57,8 @@ class NewsList extends Element {
margin-bottom: 32px;
}
- news-iframe {
+ news-gpt-ad {
+ display: block;
width: 300px;
height: 250px;
}
@@ -166,7 +166,9 @@ class NewsList extends Element {
<aside>
<div class="ad-container">
- <news-iframe src="//rcm-na.amazon-adsystem.com/e/cm?o=1&p=12&l=ur1&f=ifr"></news-iframe>
+ <news-gpt-ad id="ad_slot_1"
+ ad-unit-path="/6355419/Travel/Europe/France/Paris"
+ ad-width="300" ad-height="250"></news-gpt-ad>
</div>
<news-side-list class="fade-in" items="[[_slice(category.items, 0, 3)]]">
Most Read