Business Help Center
Create an Ad
English
Pangle Playable Ads

(*Pangle is currently only available in Japan ,Korea, Taiwan, Vietnam, Thailand, Malaysia, Egypt, Turkey, United Arab Emirates, and Saudi Arabia.)

What is a playable ad?

Pangle can deliver ads in the following formats: reward videos, interstitial videos, playable ads, or application downloads. 

A playable ad is an interactive ad format that provides a short, engaging experience attracting users and getting them to download your app or game.

With playable ads, users experience an app or game before they decide to download. This ad format is an effective way optimize for cost per impression (CPM) by gamifying your ad and getting the most out of each impression.

When should I use playable ads?

Playable ads are great for advertisers trying to increase app installs. This is especially true the following app categories: gaming, manage, and utility.

Some benefits of playable ads include:
  • Users can play a simplified version of the game in advance
  • Users can interact with your app's key functions

Sometimes telling users your app's key selling points is not enough, they need to test it out themselves. In this situation, playable ads are a great option.

Where will my playable ad be shown?

Playable ads can be served on rewarded videos and interstitial videos. 

Currently, you can only run playable ads when you select Pangle as the only placement when building out your ad group on TikTok Ads Manager.

How to create a playable ad on Pangle?

Before running a playable ad, you need to make sure the following:
  • Creatives follow Pangle requirements and specifications
  • You've integrated Pangle's JS-SDK correctly
  • Completed the display check using the testing tools
Once your ad passes the test, you can then upload your playable creative in Assets on the TikTok Ads Manager. After the playable creative has passed review, you can create a new ad. 

Note: In order to select your playable creative as the ad content, you must set Pangle as the only placement.

Let's take a look at each step in more details.

1. Creative Specifications

Follow this checklist below to ensure your creatives follow the Pangle requirements and specifications:

The playable ad should be in .zip format.

The playable ad creatives should be smaller than 3 MB (after compression).

The main .html file in the first-level directory should be named index.html

Authorize the click-to-jump operation for Pangle. To do this, Pangle needs access to the front-end of the JS-SDK. Playable will not work without this access. For more information on how to do this, please read the next section “Playable Ads and JS-SDK Access”.

The first-level directory contains the config.json file, which is in .json format and contains the playable ad’s orientation fields, representing the landscape and portrait adaptation for playable ad creatives. The values are 0 (either landscape or portrait), 1 (only portrait orientation supported) and 2 (only landscape orientation supported).

Example:
{
"playable_orientation": 0
 }

We recommend splitting the ad creatives into smaller pieces, and enable accelerated parallel downloading.

The playable ad creatives must support several types of devices.                    

The playable ad creatives should not be in mraid.js format.

Loading dynamic materials via external networks is not permitted.

The playable HTML5 materials must not contain any JS redirects.

Playable ad materials must not make any HTTP request.

2. Playable Ads and JS-SDK Access

When accessing the playable ad creatives, Pangle needs “to call for the app store when the conversion button is clicked.” Therefore, the creator of the playable ad needs to allow for access to the front-end SDK. 

This SDK allows a call for the app store through the Pangle SDK after the download button is clicked in the playable advertisement. 

Note: The accessing party does not need to call for the download or page jump operations by themselves. These operations are handled by the SDK. 
  • SDK Address:
https://sf-tb-sg.ibytedtos.com/obj/ttfe-malisg/playable/sdk/index.b5662ec443f458c8a87e.js
  • SDK Access Method:
Place the following code at the bottom of body and before the developer's own JS
<script src=
 "https://sf-tb-sg.ibytedtos.com/obj/ttfe-malisg/playable/sdk/index.b5662ec443f458c8a87e.js">
</script>
  • Calling Method:

window.openAppStore();image.png

3. Testing

To assist with the testing of your creative, Pangle has an SDK environment which can be used to emulate the playable ad on different mobile phone models and operating systems to ensure the everything looks and works correctly.

Note: To download the iOS Testing Tool for Pangle Playable Ads, please click here. This version of the testing tool is only applicable to iOS in Japan, Korea, and Taiwan.

iOS Testing with Tool:
  1. Download the designated file and package it into an App.
  1. Go to "Ad Test App" > "Tools" > "Playable Tool".
  1. Enter the "Playable URL" and "Download URL". If the preview creatives is to be displayed using portrait orientation, disable the “Horizontal Screen” option. If the ad preview needs to be displayed using landscape orientation, enable the “Landscape Orientation” option.
  1. Click "Test Playable" to enter the playable ad preview.Screenshot 2020-04-23 PM 2.42.50.png
Note:
  • Please test according to the test instructions. If the test is not complete, all ad materials that have a problem will be stopped. The advertiser should self-test according to the playable ad test use instructions.
  • The current version of playable ads will show an online video first and then display the playable ad. To simulate the online environment during the test, a video will be played first, before the playable ad begins.
  • Please use “BUDemo.xcworkspace” to build the package.
  • If you want to test deeplink ads, a deeplink_url is required for iOS. For Android, in addition to the deeplink_url, the package name (ad_package_name) is also required.

iOS Testing with the H5 Page Method:

  1. On your phone, go to "Settings", click "Safari", click "Advanced", and then open JavaScript and Web Inspector.
  1. Open the H5 page on the app.
  1. On your Mac, open Safari, then go to "Safari" > "Preferences" > "Advanced" and then check "Show 'Develop' options in menu bar".
  1. Go to "Safari", click "Develop", select the connected mobile device, and then select the H5 page from the right.
Note: If you are unable to find the mobile device after clicking "Safari" and "Develop", please do the following:
  • Go to your phone’s Settings and find the developer portal. If you do not find the developer portal, you may need to activate the developer mode on your device.
  • You can activate developer portal by opening the Preferences menu in xcode, select Accounts and add your Apple IDs, then run any project on the device to activate developer mode.

4. Create Playable Ads

  1. Upload your playable ad creatives on TikTok Ads platform, by going to "Assets" > "Creative" > "Playable Ads".
attachment_jpg_45b1afe6b907b5a9ca000053b2fc4f70.png
  1. Preview your ad creative and view review status.image.png

  1. Once your creative passes review, you can create create a new campaign or add your playable ad to an existing campaign. Go to "Campaign" > "Ad" tab > "Create".
attachment_jpg_110f780ecb5796bf9bbdf5fe6c6d9ae6.png
  1. In the ad section of your campaign, make sure the "Add Playable Materials" toggle is turned on, then add the creative you uploaded in Step 1.

Note: In order to select your playable creative as the ad content, you must set Pangle as the only placement when building out your ad group.image.png


Creative Suggestions

Suggestions for playable content:

  • Ensure that there is relevancy between first video and playable ad content. 
  • Recommended video duration is 10-25 seconds, maximum length is 30 seconds.
  • Experiment with creatives for both portrait and landscape screen orientations.
  • You can add appropriate background music and special effects to the playable ads. 
  • Use special effects, numerical settings and other methods to make it more visible.
  • Try designing creatives that show your app's core gameplay to create an engaging experience.

Suggestions for playable interaction:

  • Before the playable ad starts, there must be simple and clear instructions (e.g. text, signage, etc.)
  • During the playable ad, there can be signage or text to guide user interaction, and an appropriately placed clickable button for conversion.
  • After the playable ad has ended, the user should be presented with a button to download, as well as more information including but not limited to the game icon, game name, game rankings, game stats, etc.