Creating an AmpCaf custom Receiver

This tutorial shows how create a custom CAF Receiver using AmpCaf.

This tutorial shows:

  1. Creating a basic HTML.
  2. Including the Cast Receiver framework.
  3. Including AMP & AmpCaf in your receiver.
  4. Creating a Config Object.
  5. Creating an AmpCaf instance.
  6. Customizing the Receiver UI.
  7. Using CafAds to serve client side Ads.
  8. Hosting your Custom Receiver

1. Creating a basic HTML

Create a basic HTML page.

<html>
  <head>
    <title>My CAF Receiver</title>
  </head>
  <body>
  </body>
</html>

2. Including the Cast Receiver framework

Load the Cast Receiver Framework using a script tag in your head section and include the cast-media-player tag into the body of the HTML page.

<html>
  <head>
    <title>AMP CAF Receiver
    <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  </head>
  <body>
    <cast-media-player></cast-media-player>
  </body>
</html>

3. Including AMP & AmpCaf in your receiver

Load AMP using a script tag in your head section and then add a scrip tag in your page body. In this second script use the type "module" and import AmpCaf from AmpCafReceiver.js.

<html>
  <head>
    <title>AMP CAF Receiver
    <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
    <script type="text/javascript" src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_AMP_KEY&version=9.0.23"></script>
  </head>
  <body>
    <cast-media-player></cast-media-player>
    <script type="module">
      import AmpCaf from "AmpCafReceiver.js"
    </script>
  </body>
</html>

4. Creating a Config Object

As with regular AMP, AmpCaf uses a akamai.amp.PlayerConfig object. So, declare a const for the config object and add any required configuration.

<html>
  <head>
    <title>AMP CAF Receiver
    <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
    <script type="text/javascript" src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_AMP_KEY&version=9.0.23"></script>
  </head>
  <body>
    <cast-media-player></cast-media-player>
    <script type="module">
        import AmpCaf from "AmpCafReceiver.js"

        const config = {
            debug: false
        }
    </script>
  </body>
</html>

5. Creating an AmpCaf instance

To create an AmpCaf instance call the AmpCaf constructor passing the config object and an event listener function as arguments.

<html>
  <head>
    <title>AMP CAF Receiver
    <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
    <script type="text/javascript" src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_AMP_KEY&version=9.0.23"></script>
  </head>
  <body>
    <cast-media-player></cast-media-player>
    <script type="module">
        import AmpCaf from "AmpCafReceiver.js"

        const config = {
            debug: false
        }

        // It is adviced to include a timeout when debugging
        // to hook the chrome debugger more easily
        setTimeout(function () {
            window.amp = new AmpCaf(config, (event) => {
                console.log("AMP CAF READY")
            })
        }, (config.debug) ? 3000 : 0)
    </script>
  </body>
</html>

6. Customizing the Receiver UI

To customize the receiver UI include a style tag at the end of the page body and add any desired css. For further information on UI styling please refer to google's documentation.

<html>
  <head>
    <title>AMP CAF Receiver
    <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
    <script type="text/javascript" src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_AMP_KEY&version=9.0.23"></script>
  </head>
  <body>
    <cast-media-player></cast-media-player>
    <script type="module">
        import AmpCaf from "AmpCafReceiver.js"

        const config = {
            debug: false
        }

        // It is adviced to include a timeout when debugging
        // to hook the chrome debugger more easily
        setTimeout(function () {
            window.amp = new AmpCaf(config, (event) => {
                console.log("AMP CAF READY")
            })
        }, (config.debug) ? 3000 : 0)
    </script>
    <style type="text/css">
      cast-media-player {
        --theme-hue: 210;
        --splash-image: url("chromecast-bg.png");
        --logo-image: url("chromecast-bg.png");
      }
    </style>
  </body>
</html>

7. Using CafAds to serve client side Ads.

To serve client side ads, include a cafads section in the config object. The cafads section should specify the provider of the ads and the vmapAdsRequest.

<html>
  <head>
    <title>AMP CAF Receiver
    <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
    <script type="text/javascript" src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_AMP_KEY&version=9.0.23"></script>
  </head>
  <body>
    <cast-media-player></cast-media-player>
    <script type="module">
        import AmpCaf from "AmpCafReceiver.js"

        const config = {
            debug: false,
            cafads: {
                provider: "ima",
                vmapAdsRequest: "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=#{now}"
            },
        }

        setTimeout(function () {
            window.amp = new AmpCaf(config, (event) => {
                console.log("AMP CAF READY")
            })
        }, (config.debug) ? 3000 : 0)
    </script>
    <style type="text/css">
      cast-media-player {
        --theme-hue: 210;
        --splash-image: url("chromecast-bg.png");
        --logo-image: url("chromecast-bg.png");
      }
    </style>
  </body>
</html>

8. Hosting your Custom Receiver

The custom receiver can be hosted anywhere. To link your custom receiver to a sender application, login into your Google Cast SDK Developer Console and follow the Add New Application wizard.