How to Create MoPub Playable Ads Tutorial

How to Create MoPub Playable Ads (Twitter)

Follow these steps to create and publish MoPub playable ads.

Overview

This guide will show you how to create and publish playable ads for MoPub with 2DKit in just a couple minutes.

The total file size of this playable ad, a Shoot ‘Em Up game will be 239 KB (without gzip).

Sample Project

http://developer.2dkit.com/samples/playable-ad-shmup.zip

Relevant Classes

http://developer.2dkit.com/api/ez/NotifyAdClicked.html

http://developer.2dkit.com/api/kit/System.html#notifyAdClicked

Playable Ad Settings

After you create your playable ad in 2DKit Creator select

Project->Project Settings

Then select the Playable Ads tab.

Enter the Google Play and Apple AppStore URLs for your promoted app.

Note: some testers require an AppStore URL that begins with itunes.apple.com instead of apps.apple.com.

Handling the Call to Action

Handling the call to action with an Action in 2DKit Creator.

Drag the NotifyAdClicked action from the ez package folder.

This will call mraid.open() or mraid.openStoreUrl() if available.

A good place to put this call to action is in an end card game over screen.

Handling the call to action with code.

Add the following code to your game to handle the call to action.

System.notifyAdClicked();

This will call mraid.open() or mraid.openStoreUrl() if available.

Publishing the Ad

To publish select the following menu option in 2DKit Creator:

Build->Playable Ads->Publish MoPub Playable Ad

2DKit will handle building the output in a way that is consistent with MoPub’s requirements.

In addition 2DKit will also automatically optimize all files in a way that typically results in a 70-90% reduction in file size.

In the received zip file, unzip and locate the folder named mraid-ad.

The MRAID tags can be found in the zip.

Self-hosting

If self-hosting is preferred from the received zip file, unzip and locate the folder named mraid-ad and upload it to your server.

Testing

To test go here and select the MRAID 2.0 and Interstitial option.

http://webtester.mraid.org/

Review that all of the specs in the Prepare tab match the settings for the device you are planning to launch on

  1. Change the Default ad size (w x h) to 320 x 480 so you can get the full screen experience
  2. Change Default ad position (top, left) to 0, 0
  3. From Placement drop-down menu, select “Interstitial”
  4. Optional: Uncheck all the options for “Native features to emulate”
  5. Select Next button
  6. Paste MRAID tags (received from 2DKit) in the Flight tab and click Render
  7. Play through and click the CTA to verify it shows a confirmation about the CTA being clicked.
  8. Review the test window and the console windows to verify that everything looks good and there are no errors.

MraidProperties

More info

https://www.iab.com/wp-content/uploads/2015/08/IAB_MRAID_v2_FINAL.pdf

How to Create Playable Ads for MRAID Ad Networks

How to Create MRAID Playable Ads

Follow these steps to create and publish playable ads for MRAID-compliant ad networks.

Overview

This guide will show you how to create and publish playable ads for MRAID 2.0-compliant ad networks with 2DKit in just a couple minutes.

The total file size of this playable ad, a Shoot ‘Em Up game will be 239 KB (without gzip).

Sample Project

http://developer.2dkit.com/samples/playable-ad-shmup.zip

Playable Ad Settings

After you create your playable ad in 2DKit Creator select this menu option:

Project->Project Settings

Then select the Playable Ads tab.

Enter the Google Play and Apple AppStore URLs for your promoted app.

Note: some testers require an AppStore URL that begins with itunes.apple.com instead of apps.apple.com.

Handling the Call to Action

Handling the call to action with an Action in 2DKit Creator.

Drag the NotifyAdClicked action from the ez package folder.

This will call mraid.open() or mraid.openStoreUrl() if available.

A good place to put this call to action is in an end card game over screen using the onPointerUp or onClick handler.

Handling the call to action with code.

Add the following code to your game to handle the call to action.

System.notifyAdClicked();

This will call mraid.open() or mraid.openStoreUrl() if available.

Publishing the Ad

To publish select the following menu option in 2DKit Creator:

Build->Playable Ads->Publish MRAID Playable Ad

2DKit will handle building the output in a way that is consistent with MRAID 2.0 requirements.

In addition 2DKit will also automatically optimize all files in a way that typically results in a 70-90% reduction in file size.

In the received zip file, unzip and locate the folder named mraid-ad.

The MRAID tags will be sent along with the zip.

If you don’t require click tag support remove this line from your tags–

var CLICK_TAG = "https://playables.2dkit.com/clicked";

Single html file with all assets embedded

For networks that require a single html file with no external assets, use the index.html file the the mraid-ad folder.

Self-hosting

If self-hosting is preferred from the received zip file, unzip and locate the folder named mraid-ad and upload it to your server.

Testing

To test go here and select the MRAID 2.0 and Interstitial option.

http://webtester.mraid.org/

Review that all of the specs in the Prepare tab match the settings for the device you are planning to launch on

  1. Change the Default ad size (w x h) to 320 x 480 so you can get the full screen experience
  2. Change Default ad position (top, left) to 0, 0
  3. From Placement drop-down menu, select “Interstitial”
  4. Optional: Uncheck all the options for “Native features to emulate”
  5. Select Next button
  6. Paste MRAID tags (received from 2DKit) in the Flight tab and click Render
  7. Play through and click the CTA to verify it shows a confirmation about the CTA being clicked.
  8. Review the test window and the console windows to verify that everything looks good and there are no errors.

MraidProperties

Device Testing

There are several options for testing MRAID ads on devices depending on your requirements.  For recommendations please email support@2dkit.com.

Relevant Classes

http://developer.2dkit.com/api/ez/NotifyAdClicked.html

http://developer.2dkit.com/api/kit/System.html#notifyAdClicked

More info

https://www.iab.com/wp-content/uploads/2015/08/IAB_MRAID_v2_FINAL.pdf

How to Create Google Playable Ads Tutorial ( UAC )

Google Playable Ads Tutorial : How to Create for Google UAC / Adwords / Admob

Follow these steps to create and publish Google Playable Ads for Google Playable Ad and Interactive HTML5 campaigns.

Overview

This guide will show you how to create and publish a playable ad for Google Ads (UAC, Adwords, Admob, interactive end cards (HTML5), and rewarded playable ads) and with 2DKit in just a couple minutes.

The total file size of this playable ad, a Shoot ‘Em Up game will be 239 KB (without gzip).

Google Playable Ads Video Tutorial

Play Video Tutorial: Playable Ad Creation for Google Ads UAC

Sample Project

http://developer.2dkit.com/samples/playable-ad-shmup.zip

Handling the Call to Action

When publishing to Google Ads, adding NotifyAdClicked to a click event handler will take you the AppStore or Google Play Store link that you configure for the campaign at your Google Ads dashboard.
Go here for detailed Google campaign creation steps–

Google Ads App Campaign Creation

For other ad networks configure the App Store and Google Play Store links in 2DKit Creator ->Project->Project Settings->Playable Ads Tab

Handling the call to action with an Action in 2DKit Creator.

Drag the NotifyAdClicked action from the ez package folder in the 2DKit Creator Actions panel.

This will call ExitApi.exit()

A good place to put this call to action is in an onClick event handler action in the end card game over screen.

Handling the call to action with code.

Add the following code to your game to handle the call to action.

System.notifyAdClicked();

This will call ExitApi.exit()

Publishing the Ad

To publish select the following menu option in 2DKit Creator:

Build->Playable Ads->Publish Google Playable Ad

2DKit will handle building the output in a way that is consistent with Google’s requirements.

In addition 2DKit will also automatically optimize all files in a way that typically results in a 70-90% reduction in file size.

You will receive a zip containing google-ad.zip.

Go here for detailed Google campaign creation steps–

Google Ads App Campaign Creation

Testing

To test go here and check “Select for App Campaigns”:

https://h5validator.appspot.com/adwords/asset

Upload the google-ad.zip

Click the eye icon to show the ad preview.

Play through and click the CTA to verify it shows a confirmation about exit api.

Questions / Troubleshooting

Can 2DKit export an engaging playable ad with a file size small enough to meet the playable ads/HTML5 requirements for Google Ads?

Yes.  You can see in the linked project (239 kilobytes) that 2DKit’s small runtime and asset optimization technology really excels when it comes to delivering tiny project output.  Starting with a small initial file size leaves extra room for high-quality animation and video.

        How can I prevent Google h5validator page warnings (e.g. “Missing click tag check” , external ExitAPI) after uploading my 2DKit playable ad zip file?

This means the incorrect Google h5validator page is being used for testing.  There are multiple Google h5validator pages that look similar, so it is important to use the correct one.

Google’s documentation links to the correct h5validator page that should be used for app ads testing.

https://support.google.com/google-ads/answer/7584219?hl=en

Use the Adwords h5validator page here (as described in Google’s documentation) with the app install campaign option checked–

https://h5validator.appspot.com/adwords/asset 

For app install ads and playable ads do not test with any other h5validator pages.  For example this page should NOT be used.  https://h5validator.appspot.com/dcm/asset 

Is it possible to verify that a CTA click goes to the app store (rather than a test page) before the ad campaign is live?

For many platforms it is expected that you will see a test page after clicking the CTA if the campaign is not live.  If you want to verify that clicking the CTA will properly go to the app store before the campaign is live, you can do the following. Configure the App Store and Google Play links in 2DKit Creator ->Project->Project Settings->Playable Ads Tab and then publish as MRAID as described here–

Create MRAID Playable Ads Tutorial 

How can I prevent Google from displaying an error (e.g. mime type error, etc.) when trying to upload a 2DKit zip file ?

Make sure that you are uploading the file called google-ad.zip (found after unzipping the build_xxxxxxxxxx.zip file you receive from 2DKit).  If you try to upload build_xxxxxxxxxx.zip to Google instead of google-ad.zip then you will get an error.

More info

Google Ads Playable ads for App campaigns

Relevant Classes

http://developer.2dkit.com/api/ez/NotifyAdClicked.html

http://developer.2dkit.com/api/kit/System.html#notifyAdClicked

How to Create Google Play Instant Apps Tutorial

How to Create Google Play Instant Apps Tutorial

Follow these steps to create and publish Google Play Instant Apps.

Overview

2DKit allows you to easily create and publish quick-loading Google Play Instant Apps.  Instant Apps are a great way to let users try your app before they decide to install it. This guide will show you how to create and publish a Google Play Instant App with 2DKit in just a couple minutes.

Learn more about Instant Apps here:

https://developer.android.com/topic/google-play-instant/overview

The total file size of Instant Apps created using 2DKit is under 1 MB, which allows a truly instant experience.

Creating the Instant App

Create the Instant App as you would a playable ad.  You can use some playable ad sample projects if you are just getting started.

To handle the call to action use the NotifyAdClicked Action to prompt the user to install the app.

Publishing the Instant App

To publish select the following menu option in 2DKit Creator:

Build->Publish Google Play Instant App

2DKit will handle building the output in a way that is consistent with Google Play’s Instant App requirements.

In addition 2DKit will also automatically optimize all files in a way that typically results in a 70-90% reduction in file size.

You will receive a zip containing the apk file that should be used for testing and final publishing.

Testing with Android Studio

Android Studio is software provided by Google that allows you to easily test an Instant App on your device.  Follow the steps here to setup Android Studio.

After installing Android Studio, following these steps to test the apk you receive from 2DKit.

      1. If you have an installed version of your app on your test device, uninstall it.
      2. Connect your Android device to your local computer
      3. Run your instant app on your test device by entering the following command:ia run android-instant.apk
      4. You should now see the instant app displayed on your device.
      5. Play through the app and tap the call to action.  This will show a warning during local testing but will work properly after final publishing is complete.

After you have confirmed that the Instant App looks good on your device follow the steps here for final publishing.

https://support.google.com/googleplay/android-developer/answer/7381861?hl=en

Playable Ads

Playable Ads Creation with 2DKit

2DKit allows you to create playable ads and publish in one click  for most playable ad networks.

Click on a network below to learn more.

Facebook Playable Ads

Learn more about one-click publishing for Facebook.

Google Playable Ads

Learn more about one-click publishing for Google UAC.

MRAID Playable Ads

Learn more about one-click publishing for MRAID 2.0 compliant networks.

ironSource Playable Ads

Learn more about one-click publishing for ironSource.

Unity Playable Ads

Learn more about one-click publishing for Unity Ad Network.

TikTok Playable Ads

Learn more about one-click publishing for TikTok.

Applovin Playable Ads

Learn more about one-click publishing for Applovin.

Vungle Playable Ads

Learn more about one-click publishing for Vungle.

Chartboost Playable Ads

Learn more about one-click publishing for Chartboost.

AdColony Playable Ads

Learn more about one-click publishing for AdColony.

Appreciate Playable Ads

Learn more about one-click publishing for Appreciate.

Liftoff Playable Ads

Learn more about one-click publishing for Liftoff.

CrossInstall Playable Ads

Learn more about one-click publishing for CrossInstall.

Fyber Playable Ads

Learn more about one-click publishing for Fyber.

InMobi Playable Ads

Learn more about one-click publishing for InMobi.

MoPub Playable Ads

Learn more about one-click publishing for MoPub.

Mintegral Playable Ads

Learn more about one-click publishing for Mintegral.

Snapchat Playable Ads

Learn more about one-click publishing for Snapchat.

TapJoy Playable Ads

Learn more about one-click publishing for TapJoy.

Lifestreet Playable Ads

Learn more about one-click publishing for Lifestreet.

Line Playable Ads

Learn more about one-click publishing for Line.

Fiksu Playable Ads

Learn more about one-click publishing for Fiksu.

Google Play Instant Apps

Learn more about one-click publishing for Google Play Instant Apps.

Google Ads ( UAC ) Playable Ads Creation and Publishing with 2DKit

Google Playable Ads Creation and
Publishing

Follow these ad creative steps for Google Ads ( UAC ) Interactive HTML5 / Playable Ad campaigns.

Overview

This guide will show you how to create and publish a playable ad for Google Ads (UAC) with 2DKit in just a couple minutes.

The total file size of this playable ad, a Shoot ‘Em Up game will be 239 KB (without gzip).

Sample Project

http://developer.2dkit.com/samples/playable-ad-shmup.zip

Google Playable Ads Video Tutorial

https://youtu.be/cZXL22EOPVg

Handling the Call to Action

Handling the call to action with an Action in 2DKit Creator.

Drag the NotifyAdClicked action from the ez package folder.

This will call ExitApi.exit()

A good place to put this call to action is in an end card game over screen.

Handling the call to action with code.

Add the following code to your game to handle the call to action.

System.notifyAdClicked();

This will call ExitApi.exit()

Publishing the Ad

To publish select the following menu option in 2DKit Creator:

Build->Playable Ads->Publish Google Playable Ad

2DKit will handle building the output in a way that is consistent with Google’s requirements.

In addition 2DKit will also automatically optimize all files in a way that typically results in a 70-90% reduction in file size.

You will receive a zip containing google-ad.zip.

Testing

To test go here and check “Select for App Campaigns”:

https://h5validator.appspot.com/adwords/asset

Upload the google-ad.zip

Click the eye icon to show the ad preview.

Play through and click the CTA to verify it shows a confirmation about exit api.

Troubleshooting

How can I prevent Google h5validator page warnings (e.g. “Missing click tag check” , external ExitAPI) after uploading my 2DKit playable ad zip file?

This means the incorrect Google h5validator page is being used for testing.  There are multiple Google h5validator pages that look similar, so it is important to use the correct one.

Google’s documentation links to the correct h5validator page that should be used for app ads testing.

https://support.google.com/google-ads/answer/7584219?hl=en

Use the Adwords h5validator page here (as described in Google’s documentation) with the app install campaign option checked–

https://h5validator.appspot.com/adwords/asset 

For app install ads and playable ads do not test with any other h5validator pages.  For example this page should NOT be used.  https://h5validator.appspot.com/dcm/asset 

Is it possible to verify that a CTA click goes to the app store (rather than a test page) before the ad campaign is live?

For many platforms it is expected that you will see a test page after clicking the CTA if the campaign is not live.  If you want to verify that clicking the CTA will properly go to the app store before the campaign is live, you can do the following. Configure the App Store and Google Play links in 2DKit Creator ->Project->Project Settings->Playable Ads Tab and then publish as MRAID as described here–http://2dkit.com/info/playable-ad-setup-mraid/ 

How can I prevent Google from displaying an error (e.g. mime type error, etc.) when trying to upload a 2DKit zip file ?

Make sure that you are uploading the file called google-ad.zip (found after unzipping the build_xxxxxxxxxx.zip file you receive from 2DKit).  If you try to upload build_xxxxxxxxxx.zip to Google instead of google-ad.zip then you will get an error.

More info

https://support.google.com/google-ads/answer/7584219?hl=en

Relevant Classes

http://developer.2dkit.com/api/ez/NotifyAdClicked.html

http://developer.2dkit.com/api/kit/System.html#notifyAdClicked