Google AMP¶

Google AMP (Accelerated Mobile Pages) is a project where Google tries to create a mobile friendly web. It’s primary use case is for content pages. Basically what AMP does is strip all external JavaScript from the page and loads a light version of it. If you want to show a widget on one of your pages that is optimized for Google AMP, you can do so with the following code.

First import the amp-iframe component in the header of your page:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Place the following amp-iframe tag at the position on the page where you want it to show. Please be very careful when changing parts. Almost everything is vital for a correct functioning widget. Since Google provides no mechanism to send configuration into the amp-iframe you need to convert the attributes from the normal tdsPcInpageConfig variable for this widget to URL parameters behind the src URL of the amp-iframe:

<amp-iframe
  allowfullscreen
  frameborder="0"
  height="150"
  layout="responsive"
  resizable
  sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
  src="https://pcf.tdscd.com/pc-inpage-iframe.html?portal=[the portal you want]&token=[your TDS token for the selected portal]&widget=[the widet you want]"
  title="Best Offers"
  width="150"
>
  <amp-img
    layout="fill"
    src="https://pcf.tdscd.com/media/google-amp-placeholder.png"
    placeholder
  >
  </amp-img>
  <div overflow tabindex="0" aria-label="Show more">Click to show more</div>
</amp-iframe>

You can change the placeholder image, but please do not remove it, since this limits where you can place the widget on your page. These are Google AMP restrictions. We’re not going to explain everything this tag does here, if you want to know more please see the official Google AMP documentation.

Config to URL Parameters¶

For the amp-iframe to function you need to translate the normal tdsPcInpageConfig variable for this widget to URL parameters behind the src URL of the amp-iframe. We’ll explain this by the following example.

This config:

var tdsPcInpageConfig = tdsPcInpageConfig || {}
tdsPcInpageConfig["widget_1"] = {
  limits: {
    brandId: [1, 4]
  },
  options: {
    language: nl,
    showSponsoredPositions: false
  },
  portal: "frTelecom",
  token: "abcdABCD",
  widget: "topList_default_proposition",
  widgetOptions: {
    proposition: {
      initialFilter: {
        brandId: [1]
        minDataCredits: 1500
      }
    }
  }
};

If you want to load widget_1 for Google AMP, the config of widget_1 translates to these URL parameters:

portal=frTelecom&token=abcdABCD&widget=topList_default_proposition&limits[brandId][]=1&limits[brandId][]=4&options[showSponsoredPositions]=false&options[language]=nl&widgetOptions[proposition][initialFilter][brandId][]=1&widgetOptions[proposition][initialFilter][minDataCredits]=1500

So here are some examples of configuration keys and how they look as URL parameters:

config	URL parameter
{ portal: “ukTelecom” }	ukTelecom=ukTelecom
{ options: { label: “myLabel” }}	options[label]=myLabel
{ limits: { brandId: [1, 2] }}	limits[brandId][]=1&limits[brandId][]=2
{ widgetOptions: { proposition: { initialFilter: { phoneId: [1, 2] }}}}	widgetOptions[proposition][initialFilter][phoneId][]=1&widgetOptions[proposition][initialFilter][phoneId][]=2

Full Example Page¶

This is a complete page example with on of our widgets integrated:

<!doctype html>
<html amp>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

  <title>Showcase of a PC Frontend widget for Google AMP</title>

  <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>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

  <link rel="canonical" href="www.example.com">
</head>

<body>

  <h1>Showcase of a PC Frontend widget for Google AMP</h1>
  <p>
    This page tries to show a example of how to implement a TDS PC Frontend widget into a content page that is optimized for Google AMP. To be a valid page for AMP, this page needs some content.
  </p>
  <div>
    <amp-iframe
      allowfullscreen
      frameborder="0"
      height="150"
      layout="responsive"
      resizable
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
      src="https://pcf.tdscd.com/pc-inpage-iframe.html?portal=nlTelecom&token=abcd-1234&widget=topList_inArticle_proposition"
      title="Best Offers"
      width="150"
    >
      <amp-img
        layout="fill"
        src="https://pcf.tdscd.com/media/google-amp-placeholder.png"
        placeholder
      >
      </amp-img>
      <div overflow tabindex=0 aria-label="Show more">Click to show more</div>
    </amp-iframe>
  </div>
  <p>
    Some more content below the widget.
  </p>

</body>

</html>

Google AMP¶

Config to URL Parameters¶

Full Example Page¶

PC Frontend

Navigation

Related Topics