Firebolt AMP for Ads

What is Firebolt doing?

Firebolt cryptographically validates and signs your AMP ads to give them preferential treatment on an AMP page. When the AMP runtime sees that an AMP ad is cryptographically signed, it loads the ad along with the rest of the content. This is 6X faster than a regular AMP ad.

What do you have to do to implement this?

You have to do three things to implement this.

Creating an AMP ad

This page talks about in depth on how to create an A4A creative. You can use our example AMP ad to create your own. This is an example of an AMP Ad with very minimal styling, but includes basic analytics.

The <amp-img> tag contains the image of the creative.

Source code for an example AMP Ad

<!doctype html>
<html amp4ads>
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <style amp4ads-boilerplate>body{visibility:hidden}</style>
    <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width,minimum-scale=1">
</head>
<body>
    <a class="clickthrough" href="http://firebolt.cloudflaredemo.com/a4a-example.html?clickthrough" target="_blank">
        <div class="card">
            <amp-img id="img" layout="responsive" width="320" height="150" src="http://firebolt.cloudflaredemo.com/css/amp-flare-logo-2.svg"></amp-img>
        </div>
    </a>
</body>
</html>

After you create an AMP ad you can use the Cloudflare validator endpoint:

curl -X POST 'https://amp.cloudflare.com/a4a/q' -d @/your-a4a-ad.html

to verify if your AMP ad is valid. It will return a json saying if the ad is valid or not. Alternatively, you can run it through the AMP validator to see if it's a valid A4A format. Make sure you select AMP4ADS from the HTML Format dropdown.

Have an endpoint that can serve AMP ads

Sign up with a Cloudflare domain. If you have done this already, great! Have an endpoint on that domain that can handle the request for an AMP ad. For example,

https://your-ad-network.com/ads?slot=slot_1&size=300x25

Turn on A4A from your dashboard

Let us know once you are done setting up your A4A endpoint. We will enable A4A signing and make the Firebolt tab visible on your Cloudflare dashboard. You can turn this feature on with a simple switch. You should now see AMP ads getting delivered with Firebolt!

You can test with curl:

curl -i 'https://your-ad-network.com/_a4a/ads?slot=slot_1&size=300x25'

Pay special attention the fact that the URL includes the path prefix /_a4a. This path prefix signals to Firebolt to validate and sign the response. This prefix will be stripped off when passed to your server. All other requests (like CSS and images) will be forwarded to your server unmodified.

Look for the header X-AmpAdSignature to verify that you are getting signed ads.

Ask your publishers to put the following tag on their pages

<amp-ad width=728 height=90
    type="cloudflare"
    data-cf-network="my-network"
    src="/ads">
</amp-ad>

This tag gets translated to:

https://your-ad-network.com/_a4a/ads

You can add custom attributes to the amp-ad tag if you want to customize your ads. All the key value pairs starting with data- will be translated to query params for the request url.

For example,

<amp-ad width=728 height=90
    type="cloudflare"
    data-cf-network="my-network"
    src="/ads"
    data-slot="A"
    data-multi-size="300x25"
    data-multi-size-validation="false">
</amp-ad>

The AMP runtime constructs the following url:

https://your-ad-network.com/_a4a/ads?slot=A&multi-size=300x25&multi-size-validation=false

Tracking your ads

Use the guidelines here to add analytics to your AMP ad. This is the analytics we use to track our example AMP ad:

<amp-analytics>
<script type="application/json">
    {
      "requests": {
        "view":"https://firebolt.cloudflaredemo.com/a4a-example.html?view",
        "click":"https://firebolt.cloudflaredemo.com/a4a-example.html?click"
      },
      "triggers": {
        "view": {
          "on": "visible",
          "request": "view",
          "visibilitySpec": {
            "selector": "#img",
            "visiblePercentageMin": 50,
            "totalTimeMin": 100
          }
        },
        "click": {
          "on": "click",
          "selector": ".clickthrough",
          "request": "click"
        }
      },
      "transport": {
        "beacon": false,
        "xhrpost": false,
        "image": true
      }
    }
</script>
</amp-analytics>

You can see another example here.

Related Links