Creating an AmpCaf custom Receiver
This tutorial shows how create a custom CAF Receiver using AmpCaf.
This tutorial shows:
- Creating a basic HTML.
- Including the Cast Receiver framework.
- Including AMP & AmpCaf in your receiver.
- Creating a Config Object.
- Creating an AmpCaf instance.
- Customizing the Receiver UI.
- Using CafAds to serve client side Ads.
- 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.