Cocos游戏如何快速接入抖音小游戏广告变现？

引言

抖音小游戏常用API整理

哈喽大家好，之前帮大家整理的常用的微信小游戏API组件，帮助大家快速接入流量主，深受大家的喜爱。

很多小伙伴使用了之后都觉得非常地靠谱，迫切地想要抖音小游戏版本的API组件。

笔者也透露了近期会帮助大家整理一份抖音版本的API组件，今天它终于来了。

言归正传，今天笔者重点为大家介绍一下Cocos开发抖音小游戏常用的API和整理，如果对大家有帮助，欢迎点赞转发收藏哦，再次感谢大家的大力支持哦！

本文源工程可在文末获取，小伙伴们自行前往。

总览

为了更好地演示效果，笔者参考之前微信SDK组件简单搭了一个Demo小程序，简单但又不失优雅。

其中分享模块和流量主广告模块相关配置可视化调整。

资源结构清晰易懂，分享、广告独立成模块。组件简单易用。

Cocos3.8.3、2.4.13和其他多版本支持。

分享模块

抖音小游戏和微信小游戏一样，依赖于它的环境，容易分享传播，因此我们小游戏务必接入分享模块，不能错过一次裂变的机会。

1.被动转发

用户点击右上角菜单中的“转发”选项后，会触发转发事件，如果小游戏通过 tt.onShareAppMessage() 监听了这个事件，可通过返回自定义转发参数来修改转发卡片的内容，否则使用默认内容。

接口如下：

/**
 * 注册事件
 */
registerEvent(): void {
    //转发
    tt.onShareAppMessage(() => {
        return this.getShareData();
    });
}
/**
 * 随机获取配置的分享内容
 */
getShareData() {
    var data = {
        title: "",//分享抖音的标题
        imageUrl: "", //通过MP系统审核的图片地址
        query: "",//自定义附加参数
    };
    if (this.shareContents.length > 0) {
        var index = Math.floor(Math.random() * this.shareContents.length);
        data.title = this.shareContents[index].title;
        data.imageUrl = assetManager.utils.getUrlWithUuid((this.shareContents[index].image.texture as Texture2D).image.uuid, { isNative: true, nativeExt: ".png" });
    }
    return data;
}

2.主动转发

游戏内可通过 tt.shareAppMessage()接口直接调起转发界面，与被动转发类似，可以自定义转发卡片内容。

接口如下：

/**
 * 主动转发
 */
shareAppMessage(title: string = "", imageUrl: string = "", query: string = "", shareCallback: any = null): void {
    this.shareCallback = shareCallback;
    let that = this;
    var data = {
        title: title,
        imageUrl: imageUrl,
        query: query,
        success() {
            that.shareCallback(true);
        },
        fail() {
            that.shareCallback(false);
        },
    }
    tt.shareAppMessage(data);
}

流量主广告模块

流量主作为个人小游戏的主要收入来源，如果你想实现变现，必须要接入这个模块。

1.激励视频

激励视频广告组件是由客户端原生的图片、文本、视频控件组成的，层级最高，会覆盖在上屏 Canvas 上。

接口如下：

private rewardedVideoAd: any;
private rewardAdCallback: any;
private rewardAdCallbackObj: any;
/**
 * 播放激励视频广告
 */
showRewardedVideoAd(rewardAdCallback: Function, rewardAdCallbackObj: any): void {
    this.rewardAdCallback = rewardAdCallback;
    this.rewardAdCallbackObj = rewardAdCallbackObj;
    this.createRewardedVideoAd();
    if (!this.rewardedVideoAd) {
        this.onRewardAdCallback(false);
        return;
    }
    // 用户触发广告后，显示激励视频广告
    this.rewardedVideoAd.show().catch(() => {
        // 失败重试
        this.rewardedVideoAd.load()
            .then(() => this.rewardedVideoAd.show())
            .catch(err => {
                this.onRewardAdCallback(false);
            })
    })
}
/**
 * 创建激励视频广告
 */
createRewardedVideoAd() {
    if (!this.rewardedVideoAd && this.rewardedVideoAdConfig.adUnitId != "") {
        this.rewardedVideoAd = tt.createRewardedVideoAd({
            adUnitId: this.rewardedVideoAdConfig.adUnitId
        })
        this.rewardedVideoAd.onClose(res => {
            // 用户点击了【关闭广告】按钮
            // 小于 2.1.0 的基础库版本，res 是一个 undefined
            if (res && res.isEnded || res === undefined) {
                // 正常播放结束，可以下发游戏奖励
                this.onRewardAdCallback(true);
            }
            else {
                // 播放中途退出，不下发游戏奖励
                this.onRewardAdCallback(false);
            }
        })
        this.rewardedVideoAd.onError(err => {
            this.onRewardAdCallback(false);
        })
    }
}
/**
 * 激励视频广告回调
 */
onRewardAdCallback(success) {
    if (this.rewardAdCallback) {
        this.rewardAdCallback.call(this.rewardAdCallbackObj, success);
        if (success) {
            this.rewardedVideoAd.load();
        }
        this.rewardAdCallback = null;
        this.rewardAdCallbackObj = null;
    }
}

2.Banner 广告

Banner 广告组件是由客户端原生的图片、文本控件组成的原生组件，层级最高，会覆盖在上屏 Canvas 上。

但是要注意的是，抖音小游戏基本很少使用Banner广告。

接口如下：

private bannerAd: any;
/**
 * 显示Banner广告
 */
showBannerAd(show: boolean): void {
    if (show) {
        // 在适合的场景显示 Banner 广告
        this.createBannerAd(true);
    }
    else {
        this.bannerAd.hide();
        this.bannerAd.destroy();
        this.bannerAd = null;
    }
}
/**
 * 创建Banner广告
 */
createBannerAd(show: boolean = false) {
    if (!this.bannerAd) {
        let sysInfo = tt.getSystemInfoSync();
        // 创建 Banner 广告实例，提前初始化
        var width = 320;
        this.bannerAd = tt.createBannerAd({
            adUnitId: this.bannerAdConfig.adUnitId,
            adIntervals: 30,
            style: {
                left: sysInfo.screenWidth / 2 - width / 2,
                top: sysInfo.screenHeight,
                width: width
            }
        })
        this.bannerAd.onResize(res => {
            this.bannerAd.style.top = sysInfo.screenHeight - this.bannerAd.style.realHeight;
        })
        this.bannerAd.onError(err => {
            console.log(err)
        })
        this.bannerAd.onLoad(res => {
            if (show)
                this.bannerAd.show();
        })
    }
    else {
        this.bannerAd.show();
    }
}

3.插屏广告

插屏广告组件是由客户端原生的图片、文本、视频控件组成的，层级最高，会覆盖在普通组件上。

接口如下：

private interstitialAd: any;
/**
 * 创建插屏广告
 */
createInterstitialAd() {
    // 创建插屏广告实例，提前初始化
    if (tt.createInterstitialAd && !this.interstitialAd) {
        this.interstitialAd = tt.createInterstitialAd({
            adUnitId: this.interstitialAdConfig.adUnitId
        })
        this.interstitialAd.onClose(res => {
            this.interstitialAd = null;
            this.createInterstitialAd();
        })
    }
}
/**
 * 创建插屏广告
 */
showInterstitialAd() {
    // 在适合的场景显示插屏广告
    this.createInterstitialAd();
    if (this.interstitialAd) {
        this.interstitialAd.show().catch((err) => {
            console.error(err)
        })
    }
}

4.格子广告

格子广告组件是由客户端原生的图片、文本控件组成的原生组件，层级最高，会覆盖在上屏 Canvas 上。

在抖音小游戏，通常我们可以通过格子广告替代Banner广告

接口如下：

private customAd: any;
/**
 * 显示格子广告
 */
showGridGamePanel(show: boolean): void {
    if (this.gridGamePanel) {
        this.gridGamePanel.destroy();
    }
    this.gridGamePanel = this.createGridGamePanel();
    if (this.gridGamePanel) {
        if (show)
            this.gridGamePanel.show();
        else {
            this.gridGamePanel.destroy();
            this.gridGamePanel = null;
        }
    }
}
createGridGamePanel() {
    try {
        const oneGridGamePanel = tt.createGridGamePanel({
            gridCount: this.gridAdConfig.GridCount,
        });
        return oneGridGamePanel;
    } catch (error) {
        console.error("创建游戏推荐组件失败", error);
        return null;
    }
}

常用模块

1.侧边栏

抖音小游戏需要额外接入，官方提供的侧边栏功能，增加额外留存。

此能力将于「2023年11月24日」起开启「必接审核」，届时未接入该能力的小游戏在「新游首发」&「版本更新」环节会有「拒审」风险，为避免影响游戏上线&更新节奏，同时也为了提升小游戏留存，请尽快规划接入时间，感谢您的配合！

接入的关键有以下几个API。

• checkScene：检测是否应该显示侧边栏按钮。注意该接口在头条渠道没有。
• navigateToScene：跳转打开侧边栏。
• isSidebarEnter：通过showOptiions的scene、launch_from和location判断是否从侧边栏进入，从而进行发奖。
  图片

接口如下：

checkScene(callback) {
    try {
        var res = this.getSystemInfoSync();
        console.log(`手机型号为 ${res.model}`);
        if (res.appName == "Toutiao" || res.appName == "news_article_lite") {
            callback(false);
            return;
        }
    } catch (error) {
        console.log(`获取系统信息失败`);
    }
    tt.checkScene({
        scene: "sidebar",
        success: (res) => {
            console.log("checkScene1", res, res.isExist);
            callback(res.isExist);
        },
        fail: (res) => {
            console.log("checkScene2", res);
            callback(false);
        }
    });
}
isSidebarEnter() {
    var showOptions = tt.getLaunchOptionsSync()
    console.log(showOptions);
    return showOptions["scene"] == "021036"
        && showOptions["launch_from"] == "homepage"
        && showOptions["location"] == "sidebar_card";
}
navigateToScene(callback) {
    tt.navigateToScene({
        scene: "sidebar",
        success: (res) => {
            console.log("navigateToScene1", res);
            callback(true);
        },
        fail: (res) => {
            console.log("navigateToScene2", res);
            callback(false);
        },
    });
}

2.振动

使手机发生振动。常用于互动反馈。

接口如下：

/**
 * 使手机发生较长时间的振动（400 ms)
 */
vibrateLong(success: any = null, fail: any = null, complete: any = null) {
    tt.vibrateLong({
        success: success,
        fail: fail,
        complete: complete
    });
}

3.退出小程序

退出当前小程序，可让用户快捷退出小程序，虽然这样做不太好。

接口如下：

/**
 * 退出当前小程序
 */
exitMiniProgram() {
    tt.exitMiniProgram({
        success: () => {
            console.log("dy小程序退出成功");
        },
        fail: () => {
            console.log("dy小程序退出失败");
        }
    });
}

4.排行榜

抖音小游戏与微信小游戏最大的差异之一就是排行榜。

微信小游戏通过setUserCloudStorage保存好友排行榜信息，世界排行榜信息需要自己额外使用服务器或者云开发保存。

而抖音小游戏好友排行榜和世界排行榜都是使用setImRankData保存信息，不需要额外处理。

更加方便的是，抖音小游戏既可以在开放域通过getImRankData获取排行榜信息自定义绘制界面，还可以通过官方提供的getImRankList的接口直接调用显示排行榜，不需要自己绘制界面，非常的贴心。

接口如下：

/**
 * 对用户托管数据进行写数据操作。允许同时写多组 KV 数据。
 */
setUserCloudStorage(value: number, rankName: string = "default") {
    tt.checkSession({
        success() {
            console.log(`session 未过期`);
            tt.setImRankData({
                dataType: 0, //成绩为数字类型
                value: value + "", //该用户得了999999分
                zoneId: rankName, //不同的榜可以通过zoneId区分
                success(res) {
                    console.log(`setImRankData success res: ${res}`);
                },
                fail(res) {
                    console.log(`setImRankData fail res: ${res.errMsg}`);
                },
            });
        },
        fail() {
            console.log(`session 已过期，需要重新登录`);
            tt.login({
                success: (res) => {
                    console.log("登录成功", res);
                    that.setUserCloudStorage(value, rankName);
                },
                fail: (err) => {
                    console.log("登录失败", err);
                },
            });
        },
    });
}
getImRankList(rankName: string = "default") {
    tt.checkSession({
        success() {
            console.log(`session 未过期`);
            tt.getImRankList({
                relationType: "default", //好友榜、总榜都展示
                dataType: 0, //只圈选type为枚举类型的数据进行排序
                rankType: "all", //每天凌晨0点更新，只对当天0点到现在写入的数据进行排序
                suffix: "分", //为空或不填，一般枚举类型不需要填后缀
                rankTitle: "分数榜", //标题
                zoneId: rankName, //不同的榜可以通过zoneId区分
                success(res) {
                    console.log(`getImRankData success res: ${res}`);
                },
                fail(res) {
                    console.log(`getImRankData fail res: ${res.errMsg}`);
                    // App.ViewManager.open(ViewConst.Tips, "暂无数据");
                },
            });
        },
        fail() {
            console.log(`session 已过期，需要重新登录`);
            tt.login({
                success: (res) => {
                    console.log("登录成功", res);
                    that.getImRankList(rankName);
                },
                fail: (err) => {
                    console.log("登录失败", err);
                },
            });
        },
    });
}

其他模块

1.获取系统信息

常用于手机型号、App渠道等等。

接口如下：

/**
 * 获取系统信息。
 */
getSystemInfoSync(): { screenWidth: number, screenHeight: number, model: string, appName: string } {
    return tt.getSystemInfoSync();
}

2.显示消息提示框

显示小程序自带的提示框。

接口如下：

/**
 * 显示消息提示框
 * @param title 
 * @param success 
 * @param duration 
 */
showToast(title: string, success: boolean, duration: number = 0) {
    tt.showToast({
        title: title,
        icon: success ? "success" : "fail",
        duration: duration
    })
}

3.剪贴板

设置系统剪贴板的内容，便于用户复制分享。

接口如下：

/**
 * 设置系统剪贴板的内容
 */
setClipboardData(data: string): void {
    tt.setClipboardData({ data: data })
}

4.设置屏幕常亮

接口如下：

start() {
    tt.setKeepScreenOn({
        keepScreenOn: true,
        success: () => {
            console.log("抖音屏幕保持常亮成功");
        }
    });
}

5.监听版本更新

接口如下：

start() {
    //监听小程序有版本更新事件
    const updateManager = tt.getUpdateManager()
    updateManager.onCheckForUpdate(function (res) {
        // 请求完新版本信息的回调
        console.log(res.hasUpdate)
    })
    updateManager.onUpdateReady(function () {
        tt.showModal({
            title: '更新提示',
            content: '新版本已经准备好，是否重启应用？',
            success(res) {
                if (res.confirm) {
                    // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                    updateManager.applyUpdate()
                }
            }
        })
    })
    updateManager.onUpdateFailed(function () {
        // 新版本下载失败
    })
}

结语

以上是整理的全部核心内容，整理不易，时间宝贵，需要源工程的小伙伴可以阅读原文获取，付费不仅是知识的获取，更是对笔者的支持和认可，感谢！

https://store.cocos.com/app/detail/6786

我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。

AD:笔者线上的小游戏《打螺丝闯关》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》《方块掌机经典》大家可以自行点击搜索体验。

实不相瞒，想要个赞和在看！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！

推荐专栏：

知识付费专栏

你知道和不知道的微信小游戏常用API整理，赶紧收藏用起来~

100个Cocos实例

8年主程手把手打造Cocos独立游戏开发框架

和8年游戏主程一起学习设计模式

从零开始开发贪吃蛇小游戏到上线系列