[DRAFT] <amp-embed type="insticator">

3p/integration.js

@@ -155,6 +155,7 @@ import {imonomy} from '../ads/imonomy';
 import {improvedigital} from '../ads/improvedigital';
 import {inmobi} from '../ads/inmobi';
 import {innity} from '../ads/innity';
+import {insticator} from '../ads/insticator';
 import {invibes} from '../ads/invibes';
 import {ix} from '../ads/ix';
 import {jubna} from '../ads/jubna';
@@ -285,6 +286,7 @@ const AMP_EMBED_ALLOWED = {
   epeex: true,
   forkmedia: true,
   idealmedia: true,
+  insticator: true,
   jubna: true,
   kuadio: true,
   'mantis-recommend': true,
@@ -418,6 +420,7 @@ register('improvedigital', improvedigital);
 register('industrybrains', industrybrains);
 register('inmobi', inmobi);
 register('innity', innity);
+register('insticator', insticator);
 register('invibes', invibes);
 register('ix', ix);
 register('jubna', jubna);

ads/_config.js

@@ -534,6 +534,14 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'insticator': {
+    prefetch: 'https://testthisshit.online/amp-embed-lib/insticator.js',
+    preconnect: [
+      'https://drhn9v8cwg89y.cloudfront.net',
+      'https://d3lcz8vpax4lo2.cloudfront.net',
+    ]
+   },
+
   'invibes': {
     prefetch: 'https://k.r66net.com/GetAmpLink',
     renderStartImplemented: true,

ads/insticator.js

@@ -0,0 +1,91 @@
+// !!!!!!!!!! ---------- AMP EMBED - INSTICATOR ---------- !!!!!!!!!! //
+
+import { validateData, loadScript } from '../3p/3p';
+
+// ------- HELPER VARIABLES ------- //
+//reusable URL references to ads, embed and the library
+//Don't forget to preconnect and prefetch as it's described in the docs
+//https://github.com/ampproject/amphtml/blob/master/ads/README.md
+const url = {
+  ads: 'https://drhn9v8cwg89y.cloudfront.net',
+  embed: 'https://d3lcz8vpax4lo2.cloudfront.net',
+  lib: 'https://testthisshit.online/amp-embed-lib/insticator.js'
+};
+
+// ------- HELPER FUNCTIONS ------- //
+function createInitialMarkup() {
+  return `
+    <div id="insticator-container">
+      <div id="div-insticator-ad-1"></div>
+      <div id="insticator-embed">
+        <iframe id="insticator-iframe" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
+      </div>
+      <div id="div-insticator-ad-2"></div>
+    </div>
+  `;
+}
+
+function createTemplate(domString) {
+  const template = document.createElement('template');
+  template.innerHTML = domString;
+  return template.content;
+}
+
+function appendElement(location, el) {
+  location.appendChild(el);
+}
+
+function createElement(location, el, attrs) {
+  const newEl = location.createElement(el);
+  Object.entries(attrs).forEach(attr => newEl.setAttribute(attr[0], attr[1]));
+  return newEl;
+}
+
+function getRequest(file, callback, componentContainer) {
+  const xhr = new XMLHttpRequest();
+  xhr.onreadystatechange = () => xhr.readyState == 4 && xhr.status == 200 ? callback(JSON.parse(xhr.responseText), componentContainer) : null;
+  xhr.open('GET', file, true);
+  xhr.send();
+}
+
+function appendAds(ads, componentContainer) {
+  Object.entries(ads).forEach(ad => appendElement(componentContainer.querySelector(`#div-insticator-ad-${ad[0][ad[0].length -1]}`), createElement(componentContainer.ownerDocument, 'amp-ad', ad[1])));
+}
+
+/*
+ * @param {!Object} componentContainer
+*/
+function createComponent(componentContainer) {
+  // get data attribute from the amp-insticator tag
+  const embedId = componentContainer.getAttribute('data-embed-id');
+
+  // store DOM elements
+  const insticatorContainer = componentContainer.querySelector('#insticator-container');
+  const embedIframe = componentContainer.querySelector('#insticator-iframe');
+  const embedApp = createElement(componentContainer.ownerDocument, 'div', {
+    id: 'app'
+  });
+  const embedScript = createElement(componentContainer.ownerDocument, 'script', {
+    type: 'text/javascript',
+    src: `${url.embed}/embed-code/${embedId}.js`
+  });
+
+  // append content to iframe
+  appendElement(embedIframe.contentWindow.document.body, embedApp);
+  appendElement(embedIframe.contentWindow.document.head, embedScript);
+  // append ads
+  getRequest(`${url.ads}/test/ad_settings/${embedId}.js`, (ads, componentContainer) => appendAds(ads, componentContainer), componentContainer);
+}
+
+/*
+ * @param {!Window} global
+ * @param {!Object} data
+*/
+export function insticator(global, data) {
+  validateData(data, ['embedId']);
+  const componentContainer = global.document.getElementById('c');
+  componentContainer.setAttribute('data-embed-id', data.embedId);
+  appendElement(componentContainer, createTemplate(createInitialMarkup()));
+  createComponent(componentContainer);
+  loadScript(global, url.lib);
+}

ads/insticator.md

@@ -0,0 +1,35 @@
+<!---
+Copyright 2019 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.
+-->
+
+# Insticator
+
+## Example of Insticator's widget implementation
+
+
+```html
+<amp-embed 
+    type="insticator"
+    data-embed-id="ACCOUNT-ID">
+</amp-embed>
+```
+
+## Configuration
+
+For details on the configuration semantics, please contact [Insticator](https://www.insticator.com/contact/).
+
+### Required parameters
+
+- `data-embed-id`: Uniquie ID of your Insticator account 

examples/ads.amp.html

@@ -163,6 +163,7 @@
         <option>industrybrains</option>
         <option>inmobi</option>
         <option>innity</option>
+        <option>insticator</option>
         <option>invibes</option>
         <option>ix</option>
         <option>jubna</option>
@@ -1264,6 +1265,11 @@ <h2>Innity</h2>
       data-channel="NEWS">
   </amp-ad>
 
+  <h2>Insticator</h2>
+  <amp-embed type="insticator" width="450" height="750"
+      data-embed-id="5bf0548f-a332-4934-9d35-c9ca9e93d4ff">
+  </amp-embed>
+
   <h2>Invibes</h2>
   <amp-ad width="300" height="250"
       type="invibes"

extensions/amp-ad/amp-ad.md

@@ -316,6 +316,7 @@ See [amp-ad rules](https://github.com/ampproject/amphtml/blob/master/extensions/
 - [Imonomy](../../ads/imonomy.md)
 - [Imedia](../../ads/imedia.md)
 - [Improve Digital](../../ads/improvedigital.md)
+- [Insticator](../../ads/insticator.md)
 - [Index Exchange](../../ads/ix.md)
 - [Industrybrains](../../ads/industrybrains.md)
 - [InMobi](../../ads/inmobi.md)