Making banners with Bodymovin (After Effects) for Double Click
How to make it step by step
Background: AirBnB, Lottie, After Effects, Code and Ad Landscape
Before posting this:
- I assume you know AirBnB and Lottie
- I assume you can work with Adobe After Effects and you have bodymovin plugin installed and working
- I assume you know Ad Landscape, you can code and make Ads with Google technology, and you do it by code (not using kind of tools such as Google Web Designer, Adobe AnimateCC or so).
There is an example at Airbnb Github Lottie-web documentation, right here https://github.com/airbnb/lottie-web/tree/master/demo but they are making a banner with two mistakes:
- It goes fullscreen
- It does not follow Google Specs (not clickable, no border, lasts for more than 30 seconds)
Steps to create your DCM Ad with AE, bodymovin and Code
Create you animation in After Effects, with same measures as your Ad will have. Say you want to make ie. a 300x600px in DCM, make a composition of 300x600 in AE.
Remember this:
- All your content should go on the animation (Call to Action, etc., not recommened to mix your json with code).
- Your composition should last as much for 30 seconds
Here´s a video in case you are lost about the process:
So, go directly to Lottie web player, https://lottiefiles.com/web-player with your json code of your lottie animation uploaded.
In example say you have this biker animation, this is the url of the animation: https://assets9.lottiefiles.com/datafiles/MUp3wlMDGtoK5FK/data.json
You will find a configurator, remember to:
- Remove controls
- Remove loop (Google does not allow Ads playing more than 30 seconds)
If you don´t have your animation uploaded, don´t worry, just take a look at the generated code. You will have a code like this:
Go to your code:
First of all, make sure you have all the libraries needed:
Second: Embed your json with the appropiate measures (here is 300x300, it should be 300x600px). Remember to remove the loop, otherwise your Ad won´t be approved by Google
This is my code in the HTML file:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<meta name=”ad.size” content=”width=300,height=600">
<! — Adds the Enabler →
<script src=”https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<! — Adds the Lottie Player →
<script src=”https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<! — Adds the clickTag →
<script type=”text/javascript”>var clickTag = “https://www.google.com/";</script>
<title></title>
</head>
<style type=”text/css”>
@charset “UTF-8”;
/* CSS Document */
/* Default style, feel free to remove if not needed. */
body, body * {vertical-align: baseline; border: 0; outline: 0; padding: 0; margin: 0; cursor: pointer;}
/* Div layer for the entire banner. */
#content_dc{width: 300px; height: 600px;}
#myborder{position: absolute; top: 0px; left: 0px; width: 299px; height: 599px; box-shadow: 0 0 0 1px black inset; z-index: 300; opacity: 1;}
/* Invisible button for background clickthrough. */
#background_exit_dc {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; cursor: pointer; opacity: 0; z-index: 400;}
:focus {outline:none;}
::-moz-focus-inner {border:0;}
</style>
<body>
<div id=”container_dc”>
<div id=”content_dc”>
<! — This is the json created from After Effects with Bodymovin →
<lottie-player src=”data.json” background=”transparent” speed=”1" style=”width: 300px; height: 300px;” loop autoplay >
</lottie-player>
</div>
<div id=”myborder”></div>
<button id=”background_exit_dc” onclick=”window.open(window.clickTag)”></button>
</div>
</body>
<script type=”text/javascript”>
// Enabler Initialization
// If true, start function. If false, listen for INIT.
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
console.log(“dentro!”);
}
//Polite Load
if (Enabler.isInitialized()) {
init();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}
// Runs when Enabler is ready.
function init() {
if (Enabler.isPageLoaded()) {
politeInit();
} else {
Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
}
};
// Runs when the page is completely loaded.
function politeInit(){
// Add your code to hide any loading image or animation and load creative
// assets or begin creative animation.
};
</script>
</html>
Third: If you open the Ad in your browser, you won´t see anything as there´s the CORS policy error on console, don´t worry…
Make a .zip with your Ad including your html file and your json file, you can download this example right here. Remember Google Specs or AdExchanges:
- Ad Weight (usually 500Kb on DV360)
- Border 1 px (it´s already in my template)
- Duration under 30 secs.
Go to Google HTML5 Validator, https://h5validator.appspot.com/ and upload your .zip, you will find your Ad Ok
Also you will have a warning in you Ad:
This goes related to CDN libraries. Here you have almost all Lottie CDN libraries, I expect Google uploads the library to their CDN, by now, this guys don´t know much about it. Actually I´m writting Google to upload it ;D
I have made a petition to Google to upload the libraries to their CDN, you can sign it here.
Send files to your trafficker and have a beer!
