AMP

Important: this documentation is not applicable to your currently selected format stories!

amp-ad-custom

Description

Alternative way to serve valid AMPHTML ads.

 

Required Scripts

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

Overview

AMP template ads are an alternative way to serve valid AMPHTML ads without the complexity of serving time validation and signing. The high level idea is to load an ad template that is written in AMP and served from an authorized AMP proxy server, and render the ad client-side with fetched ad data in JSON format from an ad server.

For any ad network to serve AMPHTML template ads, the integration consists of 3 parts:

  • AMPHTML Ad template creation
  • Ad server change: ad serving endpoint
  • Ads tag in AMP

AMPHTML Ad Template Creation

Ad network creates ad templates in AMP format and hosts them on their own domain similar to canonical AMP pages.

For example, adnetwork.com could host a template at the following URL: https://adnetwork.com/amp_template_1.html The corresponding AMP proxy URL is: https://adnetwork-com.cdn.ampproject.org/ad/s/adnetwork.com/amp_template_1.html.

The ad network's domain name (origin) serves as a namespace, and the URL path serves as its ID.

The proxy server caches the template on the first request. It follows the same stale-while-revalidate caching policy as normal AMP pages, meaning a syncing request is made in the background after every cache hit.

To make sure the template is valid AMPHTML, ad network must make an HTTP request to the cache URL, which returns a 4XX error, if invalid. This will also warm up the cache, and thereby speed up the first ad load. The cache URL can be converted from the canonical AMP URL following the rule described above (see detailed URL format here).

To update a template, an ad network just needs to update the page on their domain, then make another cache warm-up request.

at this stage, domains need to be allowlisted manually in AMP Cache to experiment with the feature.

Ad server

The ad network needs to provide a new serving endpoint that returns a CORS response in a JSON format:

{
  templateUrl: "https://adexample.com/amp_template_1.html",
  data: {
    clickUrl: "https://buy.com/buy-1",
    buttonText: "Buy now"
  },
  analytics: {
    type: "googleanalytics",
    config: {
      ...
    }
  }
}

The response requires a couple of custom headers:

  • custom headers for CORS
  • AMP-Ad-Template-Extension: amp-mustache
  • Amp-Ad-Response-Type: template

Ads tag

The amp-ad-custom extension can be used to quickly declare ad slots, using key-value pairs set on data attributes to form the ad request. An example slot might look like:

<amp-ad-custom
  width="320"
  height="50"
  src="http://www.my-ad-network.com"
  data-request-param-{param_1}="{val_1}"
  data-request-param-{param_2}="{val_2}"
  .
  .
  .
  data-request-param-{param_N}="{val_N}"
>
</amp-ad-custom>

And the resultant ad request URL would be: http://www.my-ad-network.com?{param_1}={val_1}&{param_2}={val_2}&...&{param_N}={val_N}.

هل تحتاج إلى مزيد من المساعدة؟

لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.

الذهاب إلى Stack Overflow
هل وجدت خطأ أو تفتقد لميزة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

الانتقال إلى GitHub