Industry

Advertising Technology

Use case

Real-time adaptable digital advertising

Result

Created a banner ad that could adapt its message to millions of different images in real-time

MRM//McCann is one of the world’s largest global digital marketing agencies. The agency provides original content creation and digital strategy for customers like Mastercard, the U.S. Army, Nikon, and Microsoft. As a top digital marketing agency, MRM//McCann innovates with the latest technologies and uses them to power marketing campaigns and deliver more value to clients.

Marcus Johanssonmarcus is a technical director at the digital agency MRM//McCann. He runs technical development for for MRM//McCann’s creative campaigns and is at the forefront of designing technology-driven marketing campaigns.

Challenge

How can you serve an ad that sees what a customer sees?

Contextual relevance is key to standing out from a vast range of products being advertised online at every second. MRM//McCann’s client Vattenfall, one of Europe’s biggest energy companies, needed a solution to be able to show potential customers the right product at the right time - in real time.

Besides their core business as an energy producer, Vattenfall also offers consumers smart solutions for their homes. Their online store sells a wide range of products that customers can control through their smartphones as well as products that help reduce energy consumption. In order to get these products in front of potential customers, MRM//McCann came up with a creative, interesting, and relevant way to showcase Vattenfall’s offerings through online banner advertising.

“Using Clarifai’s visual recognition solution, we were able to create a banner ad which could adapt its messages to millions of different images, in real-time.” - Marcus Johansson, Technical Director of MRM//McCann

Solution

MRM//McCann used Clarifai to create a banner ad that can adapt its message to millions of images in real-time, connecting potential customers with relevant products to purchase.

MRM//McCann first identified a target site on which they could run “smart” banner ads for Vattenfall’s vast offering of energy-friendly consumer products. Hemnet, Sweden’s largest real estate website, offered the perfect platform for Vattenfall to target potential customers. In order to get Hemnet visitors to consider Vattenfall’s smart home products with relevant ads, MRM//McCann combined real-time user data from Hemnet.se with Clarifai’s real-time image recognition API.

Implementation

Automatically “see” and understand images

Two million unique visitors browse Hemnet every week to look at images of interior and exterior design for purchasing decisions or inspiration. Every day, thousands of new images are posted. In order for MRM//McCann to build a banner ad that “sees” what a visitor sees, they needed to first automatically understand what was in every image.

Using Clarifai’s image recognition technology, MRM//McCAnn was able to combine real-time user data from Hemnet.se with over 11,000 image recognition concepts like “indoor,” “outdoor,” “pool,” and “lighting.” They then cross-linked this to a list of banner ads for products that were relevant for the image a Hemnet visitor was looking at. The result was a banner ad that could adapt its message in real-time according to what the visitor sees.

“Through the Clarifai API we were able to create a truly relevant and innovative solution for one of our clients.

Connecting buyers with products at the right time

MRM//McCann crafted a truly relevant ad experience for Vattenfall by enabling them to connect buyers with products based on their current online behavior. With Clarifai’s Visual Search product, MRM//McCann was able to understand millions of images on Hemnet.se and thereby understand consumer behavior in real-time and serve relevant ads based on that behavior.

Traditional banner ads and product recommendations are served based on either past online behavior or similar customer behavior. For example, if someone browsed or purchased an item in the past, they are advertised the same item in the future. Or, if someone of a certain age, location, and gender bought something in the past, a new visitor with a similar profile will be served that advertisement in the future. These two means of serving ads and recommendations are not the most relevant; nothing is a better indicator of a consumer’s current interests than their current browsing behavior.

For the first time ever, we were able to use image recognition in a large-scale ad campaign. This is truly a leap into the next era of banner advertising.

Quick and easy implementation

MRM//McCann’s Technical Director, Marcus Johansson, implemented Clarifai for its accuracy, flexibility, and ease of use, as well as the helpful Clarifai support in the setup of the solution. With a team of only one developer, Marcus was able to launch this innovative ad campaign in just over two weeks from start to finish.

“We chose Clarifai for their accuracy in dealing with image recognition and for their API, which was very easy to work with right from the start.”

DIY with Clarifai

Now that you’ve been inspired by MRM//McCann's innovative banner ads, it’s time to build your own app. Clarifai’s core model includes tags for over 11,000 concepts you can apply to your business. Or, you can use Clarifai's Custom Training solution to teach our AI new concepts. All it takes is three simple lines of code - sign up for a developer API account to get started for free!

Once you’ve signed up for a developer account, head over to Applications and make a new one.  Make sure you nab that Client ID and Client Secret:

image03

Now, head over to https://github.com/clarifai/clarifai-nodejs. There, you’ll find our Node.js client, which makes this process even easierTo set up your environment, download the clarifai node.js file and stick it in your project.

Boo yah. You’re set up. Now head over to your Node project and just require the Clarifai client:

var Clarifai = require('./YOUR_PATH_HERE/clarifai_node.js');

Remember that Client ID and Client Secret you nabbed earlier? We’re gonna use those now. You can either paste them in this function directly, or save them in an environment variable.

Clarifai.initAPI('YOUR_CLIENT_ID', 'YOUR_CLIENT_SECRET');

Now for the fun part. You can easily tag an image with just 3 lines of code:

var imageURL = 'MY_IMAGE_URL';
var ourId = 'my great image'; // any string that identifies the image to your system
Clarifai.tagURL(imageURL, ourId, handler); // “handler” is your basic error handler function

You’re all set! Now you can easily and tag and sort your images to your heart’s desire. If you’d like to see a more in-depth example, check out clarifai_sample.js in the GitHub repo.