How to Create Vungle Playable Ads Tutorial

April 30, 2021/in 2dkit, playable ads, tutorial, vungle /by 2DKIT

How to Create a Vungle

Playable Ad with 2DKit

Follow these steps to create and publish Vungle

playable ads for Vungle ad network.

Overview

This guide will show you how to create and publish playable ads for Vungle ad network 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 parent.postMessage(‘download’,‘*’).

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 parent.postMessage(‘download’,‘*’).

Publishing the Ad

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

Build->Playable Ads->Publish Vungle Playable Ad

2DKit will handle building the output in a way that is consistent with Vungle’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 vungle-ad.

All the required files can be found in this folder. For example, you will see ad.html in this folder.

How to Create Unity Playable Ads Tutorial

April 30, 2021/in 2dkit, builder, creator, mraid, mraid2.0, playable ads, tutorial, unity playable ads, unity3d /by 2DKIT

Unity Playable Ads Tutorial :

How to Create for Unity Ad Network

Follow these steps to create and publish your Unity playable ads for Unity Ads ad network.

Overview

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

2DKit supports one-click publishing for Unity Ad Network playable ad creatives.

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

The published build contains a standalone index.html file with all of the assets and code self-contained without the need for any additional assets.

Additionally all of the following requirements are automatically handled when 2DKit projects are published as Unity Playable Ads.

Playable ads have the following required specifications:

Use a single HTML.index file.
The index.html file must be inlined, with no links to other files or folders.
The file must be minified (optimized for machine-reading by removing empty spaces).
The file must be under 5MB.
The ad must comply with Mobile Rich Media Ad Interface Definitions (MRAID) 2.0 guidelines.

In addition, Unity requires the following specifications outside of MRAID:

Android games must use Android version 4.4 or higher.
iOS games must use iOS version 8.0 or higher.
Ads should support both portrait and landscape orientations.
Ads should not need any network requests (XHR).
Ads should link directly to the app store using mraid.open.
Wait for the MRAID viewableChange event before starting the playable content.

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.

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 Unity Playable Ad

2DKit will handle building the output in a way that is consistent with Unity Ads’ 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 unity-ad.

Final Deliverable

The index.html is the only file that should be delivered for Unity Ads.

Testing in the Test App

Follow these steps to test with the Unity Ad Testing app.

Download the Unity Ad Testing mobile app for Android and iOS.
Enter the Playable URL you received after publishing via 2DKit (e.g. https://youridgoeshere.apps.2dkit.com/unity-ad/index.html ) .
Tap Initialize.
Tap Show.

Testing MRAID

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

https://github.com/mraid/webtester

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

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

MraidProperties

How to Create Fyber Playable Ads Tutorial

April 30, 2021/in 2dkit, fyber, playable ads, tutorial /by 2DKIT

How to Create Fyber Playable Ads Tutorial

Follow these steps to create and publish Fyber playable ads.

Overview

This guide will show you how to create and publish playable ads for Fyber ad network 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 Fyber Playable Ad

2DKit will handle building the output in a way that is consistent with Fyber’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

Change the Default ad size (w x h) to 320 x 480 so you can get the full screen experience
Change Default ad position (top, left) to 0, 0
From Placement drop-down menu, select “Interstitial”
Optional: Uncheck all the options for “Native features to emulate”
Select Next button
Paste MRAID tags (received from 2DKit) in the Flight tab and click Render
Play through and click the CTA to verify it shows a confirmation about the CTA being clicked.
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 MoPub Playable Ads Tutorial

April 30, 2021/in 2dkit, playable ads, tutorial /by 2DKIT

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

Change the Default ad size (w x h) to 320 x 480 so you can get the full screen experience
Change Default ad position (top, left) to 0, 0
From Placement drop-down menu, select “Interstitial”
Optional: Uncheck all the options for “Native features to emulate”
Select Next button
Paste MRAID tags (received from 2DKit) in the Flight tab and click Render
Play through and click the CTA to verify it shows a confirmation about the CTA being clicked.
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

April 30, 2021/in 2dkit, mraid, playable ads, tutorial /by 2DKIT

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

Change the Default ad size (w x h) to 320 x 480 so you can get the full screen experience
Change Default ad position (top, left) to 0, 0
From Placement drop-down menu, select “Interstitial”
Optional: Uncheck all the options for “Native features to emulate”
Select Next button
Paste MRAID tags (received from 2DKit) in the Flight tab and click Render
Play through and click the CTA to verify it shows a confirmation about the CTA being clicked.
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 )

April 30, 2021/in 2dkit, google, google html5, google playable ads, google playable ads tutorial, html5 game engine, interactive ads, interactive video, playable ads, uac, video ads /by 2DKIT

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

Archive for category: 2dkit

How to Create Appreciate Playable Ads with 2DKit

Follow these steps to create and publish Appreciate

playable ads.

Overview

Sample Project

Relevant Classes

Playable Ad Settings

Project->Project Settings

Handling the Call to Action

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

Handling the call to action with code.

Publishing the Ad

Build->Playable Ads->Publish Appreciate Playable Ad

CrossInstall

Playable Ads Tutorial :

How to Create Playable Ads for CrossInstall

Follow these steps to create and publish CrossInstall ( MoPub / Twitter ) playable ads.

Overview

Sample Project

Relevant Classes

Handling the Call to Action

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

Handling the call to action with code.

Publishing the Ad

Build->Publish CrossInstall Ad

Testing with Creative Preview App

How to Create AdColony Playable Ads with 2DKit

Follow these steps to create and publish AdColony playable ads for AdColony ad network.

Overview

Sample Project

Relevant Classes

Playable Ad Settings

Project->Project Settings

Handling the Call to Action

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

Handling the call to action with code.

Publishing the Ad

Build->Playable Ads->Publish AdColony Playable Ad

Testing

More info

How to Create Facebook Playable Ads Tutorial

Learn how to create and publish Facebook Playable Ad campaigns using 2DKit.

Facebook Playable Ads Creation Video

Learn How to Create Facebook Playable Ads with the 2DKit Guide

Rapidly Create Facebook Playable Ads with Visual Tools

Instant Loading

Auto-Publishing Speeds Iteration

All Casual Gaming Genres Supported

Reach Any Platform. Any Device.

Playable Ad Premium Game Creation Features

Blazing Fast Performance

Lightweight Runtime

Premium Visual Fidelity

Streamlined Workflow

Proven and Stable

Auto-Optimize Assets

Adobe Animate/Flash One-step Importing

Integrated Box2D Physics

Dynamic Lighting with Normal Maps

Masking

Visual Editor

Advanced Options for Text and Fonts

Multi-Channel Audio

Integrated Video

Advanced Particle Effects

Retina/HiDPI Graphics

Advanced GPU Image Filters

Vector Graphics Drawing API

Real-time Video Rendering Effects

Camera System

Stunning Scene Transition Effects

Parallax Scrolling

Meshes

Custom GLSL Shader Effects

Spine Animation

UI Widgets

Reusable Symbols

Visual Studio Code

Responsive Fullscreen Layout