ppgee / cocos-pnp

Cocos Playable Ads in Multi-Network(facebook, google, unity, tiktok etc.)

Playable ads adapter

A Plugin for Exporting Cocos Playable Ads in Multi-Channel.

中文说明，点击这里

If you only need to use the plugin, you can download the build package directly. The major versions are differentiated between 2.x and 3.x. Currently, the tested versions are 2.4.9, 2.4.10, and 3.x. For other versions, please test them yourself. If you have any questions, feel free to submit an issue or pull request.

Download

Plugin download link:

https://github.com/ppgee/cocos-pnp/releases?q=playable-ads-adapter&expanded=true

Install

After downloading the plugin, extract it and place it in the corresponding plugin folder for Cocos:

• For 2.x, the plugin folder is packages in the root directory of the project.

• For 3.x, the plugin folder is extensions in the root directory of the project.

Once installed, you can use it. If you cannot find the plugin, try restarting the project.

Using the Plugin

• There are two ways to adapt the plugin. The first is to automatically trigger the adaptation function when building and publishing the project (select web-mobile or web-desktop as the build channel).

• In the project option bar, select 多渠道构建, then click 开始构建 to start the build.

Plugin Description

Supported Channels

	AppLovin	Facebook	Google	IronSource	Liftoff	Mintegral	Moloco	Pangle	Rubeex	Tiktok	Unity
>= 2.4.6	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
3.8.x	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

Extend Features

1. Supports global dynamic replacement of channel names, making it easy to handle special logic for a specific channel. The placeholder for this feature is '{{__adv_channels_adapter__}}', for example:

// source code
window.advChannels = '{{__adv_channels_adapter__}}' // Prevent rollup dead code elimination from omitting this code, the placeholder variable can be mounted on the global without deactivation

// Code will be replaced with Facebook channel:
window.advChannels = 'Facebook'

2. Supports injecting additional scripts for each channel to configure special business logic. You need to create a .adapterrc file in the root directory to edit the configuration information in JSON format. An example of the configuration is as follows:

type TChannel =
  | 'AppLovin'
  | 'Facebook'
  | 'Google'
  | 'IronSource'
  | 'Liftoff'
  | 'Mintegral'
  | 'Moloco'
  | 'Pangle'
  | 'Rubeex'
  | 'Tiktok'
  | 'Unity'

type TPlatform =
  | 'web-desktop'
  | 'web-mobile';

type TWebOrientations = 'portrait' | 'landscape' | 'auto'

type TAdapterRC = {
  buildPlatform?: TPlatform // Cocos build platform value
  orientation?: TWebOrientations // Cocos build device orientation value
  exportChannels?: TChannel[] // Channels to export. If empty or not specified, export all channels.
  skipBuild?: boolean // Whether to skip the build process. Default is false.
  enableSplash?: boolean // Whether to set a custom splash screen. Default is true.
  injectOptions?: {
    [key in TChannel]: {
      head: string // Appended to the head tag in HTML
      body: string // Appended before all scripts in the body tag in HTML
      sdkScript: string // Injects the SDK script into the corresponding channel
    }
  },
  isZip?: boolean // // Whether to compress the package with Pako, the default is true
  tinify?: boolean // Whether to compress images with Tinypng.
  tinifyApiKey?: string // Tinypng API key
}

.adapterrc file example:

{
  "buildPlatform": "web-mobile",
  "orientation": "auto",
  "injectOptions": {
    "AppLovin": {
      "head": "<script>console.log('AppLovin')</script>"
    },
    "Google": {
      "body": "<a onclick=\"ExitApi.exit()\" style=\"display: none;\"></a>"
    },
    "Unity": {
      "body": "<script>if(mraid.getState()==='loading'){mraid.addEventListener('ready',onSdkReady)}else{onSdkReady()}function viewableChangeHandler(viewable){if(viewable){}else{}}function onSdkReady(){mraid.addEventListener('viewableChange',viewableChangeHandler);if(mraid.isViewable()){showMyAd()}}var url='ios链接';var android='安卓链接';if(/android/i.test(userAgent)){url=android}function showMyAd(){mraid.open(url)}</script>",
      "sdkScript": "<script src=\"./mraid.js\"></script>"
    }
  }
}

3. Supports specifying selected channels, using the following configuration:

// .adapterrc
{
  "exportChannels": ["Google", "Facebook"] // Channels to export. If empty or not specified, export all channels.
}

4. Supports image compression with Tinypng to further reduce the package size, using the following configuration:

// .adapterrc
{
  ...,
  "tinify": true // Whether to compress images with Tinypng
  "tinifyApiKey": "YOUR_TINYPNG_API_KEY" // Tinypng API key
}

5. Supports Pako compression to further reduce the package size, using the following configuration:

// .adapterrc
{
  ...,
  "isZip": true // Whether to compress the package with Pako, the default is true
}

Plugin Development and Build Steps

Clone the Project

git clone [email protected]:ppgee/cocos-pnp.git

Development Setup and Dependency Installation

Please configure the hot update plugin directory first.

// rollup.config.js
...
const plugins = [
  ...,
  /*
   * src is the exported project in the current project
   * desc is the global directory of the developer's Cocos editor
   */
  cocosPluginUpdater({
    src: `${__dirname}/${outputDir}`,
    dest: `~/.CocosCreator/${is2xBuilder ? 'packages' : 'extensions'}/${appName}`
  }),
]
...

# Install dependencies
pnpm install

# Develop version 2.4.x
pnpm watch:2x

# Develop version 3.x
pnpm watch:3x

Build the Project

# Install dependencies
pnpm install

# Build version 2.4.x
pnpm build:2x

# Build version 3.x
pnpm build:3x

Contributors

cocos-pnp's Issues

.adapterrc 文件应该放在哪个根目录下

作者你好！
我看了https://github.com/ppgee/cocos-pnp/issues/5，但还是存在疑问，下图是打包 cocos creator 扩展插件的源代码目录

我尝试将 .adapterrc 文件放在上图所示的根目录下，执行 playable-ads-adapter 目录下的 package.json 的指令 build:2x，
生成的扩展插件自动放在了 ~/.CocosCreator/packages 目录下，然后在 creator 编辑器中构建，但是打包结果跟我的配置不一致。
于是我尝试将 .adapterrc 文件放在 playable-ads-adapter 和 playable-adapter-core 下，分别执行其中打包指令，最后再构建，打包结果还是跟我的配置不一致。

也试过将 .adapterrc 文件放在 ~/.CocosCreator/packages/playable-ads-adapter/ 下，但也没有达到目的。

还试过在 .adapterrc 文件名后面添加后缀 .json，变成 .adapterrc.json，然后重复以上的操作，也是不行。

请问是我的操作错误吗？可以详细说明是怎么操作吗？
谢谢！感恩！！

我的 .adapterrc 文件代码如下：

{
    "buildPlatform": "web-mobile",
    "orientation": "auto",
    "enableSplash": true,
    "exportChannels": ["AppLovin","IronSource","Mintegral","Tiktok","Unity"],
    "injectOptions": {
        "Mintegral": {
            "body": "<script>window.gameStart=function(){}window.gameClose=function(){}</script>"
        },
        "Tiktok": {
            "body": "<script>window.openAppStore=function(){}</script>"
        }
    }
}

How Can I Send Events On Platforms

How can I trigger events like starting a level, ending it, or opening the market? I have a ".adapterrc" file like the one below, but I don't know how to run events through TypeScript.

{
  "buildPlatform": "web-mobile",
  "orientation": "portrait",
  "enableSplash": true,
  "injectOptions": {
    "AppLovin": {
      "head": ""
    }
  }
}

感谢大佬回复

现在存在一个问题就是Mintegral渠道的打出来是html文件+js文件夹（里面是一些js文件) 并没有全都打到html里。

enableSplash does not work

• Cocos Creator version: 3.6.3, 3.7.4, 3.8.2 (I tested all 3 versions and got errors)
• cocos-pnp version: 1.3.7
• I want to remove the default loading screen of Cocos. In the .adapterrc I have changed the enableSplash attribute to false. But after the build is completed, Cocos' default loading screen is still there and has not been deleted.

Problem with instalation

Hi, currently trying to use your plugin, at all version of Cocos I'm getting this kind of error, can you help me please, I'm new to Cocos and possibly doing something wrong.

playable-adapter-core配置环境问题

您好，我下载了playable-adapter-core工程项目，但是项目无法运行启动，请问您的npm版本是多少？

关于引入 mraid.js 文件的问题

export const AD_SDK_SCRIPT = '<script src="mraid.js"></script>'

作者你好，我第一次接触试玩广告打包，有很多不明白的地方，希望可以得到大佬的回复，关于这个文件在html 文件中引入我很疑惑：

1.这个文件从哪里来？我没有这个文件

2.app lovin 的文档说不要引入外部文件

3.我看到 unity 渠道也有mraid.js文件的引入

4.打包之后的代码是混淆过后的，变量名发生了变化，我用 tiktok 渠道审核发生了以下错误：

然后尝试关闭混淆代码，全局搜索 uglify 只看到下图所示的地方有使用：

于是把 minify 去掉之后重新构建插件，再打包出来，发现没有生效。

因为找不到混淆代码的地方，然后我换了一个工具打包出没有混淆代码的 html 文件，再用TikTok 审核，就通过了。

第四个问题是：混淆代码的功能在哪里关闭？

5. 这个插件有没有包装好的 api 供小白在cocos 项目中使用，从而不需要调用其他多个渠道的 api

6. 关于 unity 和 ironSource这两个渠道都需要有监听 sdk 是否准备好的代码，比如 ironSource：

//LOAD the game, but do not start it until the ad is visible
window.addEventListener("load", function(){
  (dapi.isReady()) ? onReadyCallback() : dapi.addEventListener("ready", onReadyCallback); 
   //here you can put other code that not related to presenting any media information - do not play any audio/video/images at this moment
     //use this to prepare your creative to be shown(i.e. do necessary calculations or pre-loads)
});
function onReadyCallback(){
	//no need to listen to this event anymore
	dapi.removeEventListener("ready", onReadyCallback);
      let isAudioEnabled = !!dapi.getAudioVolume();
	if(dapi.isViewable()){
		adVisibleCallback({isViewable: true});
	}
	
      dapi.addEventListener("viewableChange", adVisibleCallback); //this event is used to know when the ad was visible/hidden
	dapi.addEventListener("adResized", adResizeCallback); //this event is used recalculate ad UI items(mostly upon rotation)
      dapi.addEventListener("audioVolumeChange",         audioVolumeChangeCallback); //this event is used to get info about any volume state change
}
function startGame() {
    //start your game here
    var screenSize = dapi.getScreenSize();
    //(add your own code here)
}
function pauseGame() {
    //pause your game here(add your own code here)
}
function adVisibleCallback(event){
	console.log("isViewable " + event.isViewable);
	if (event.isViewable){
		screenSize = dapi.getScreenSize();
		//START or RESUME the ad (add your own code here)
            event.startGame(); //example of function that can be called to start game
	} else {
		//PAUSE the ad and MUTE sounds or DO nothing if creative hasn�t been launched yet (add your own code here)
            event.pauseGame(); //example of function that can be called to pause game
	}
}
function adResizeCallback(event){
	screenSize = event;
	console.log("ad was resized width " + event.width + " height " + event.height);
}
//When user clicks on the download button - use openStoreUrl function
function userClickedDownloadButton(event){
	dapi.openStoreUrl();
}
function audioVolumeChangeCallback(volume){
	let isAudioEnabled = !!volume;
	if (isAudioEnabled){
		//START or turn on the sound(add your own code here)
	} else {
		//PAUSE the turn off the sound(add your own code here)
	}
}

cocos 项目中需要真的在 sdk 准备好之后才开始游戏吗？

最后，不管大佬回不回复，都要感谢大佬贡献的这个插件！

.adapterrc

I want to create my own templates for each network but I don't understand how to create " .adapterrc " in the root folder is it the folder in the project or in the plugin can you guide me?

Not work in Facebook PlayableAds

Hi, We use your nice library in CocosCreator3.6.1.

In this time, I made facebook playable ads, but can't play in facebook playable preview.

It only shows splashscreen and has a 2mb file size error.
However, my file size is not even 1mb.

I know these two problems are separate, but can you give me your opinion on each?

Thank you.

Generated HTML file shows only black screen

Cocos Creator 3.8.2
Building for web-mobile or web-desktop
I'm testing the generated html with ad network tools and everything's fine in desktop browsers. However, when I test with AppLovin and Unity mobile apps on my phone, only empty screen is shown: no world camera rendering, no canvas, no Cocos logo. I played with .adapterrc parameters (isZip etc) - no chance. When building for web-desktop, the text in the html wrapper is seen (Project name in header and reference to cocos in footer), but the game screen itself is empty. Any ideas?

没有找到插件位置

2.x的插件目录是项目根目录的packages
3.x的插件目录是项目根目录的extensions
都没有这两个插件的文件夹