即时体验页面编辑器

TikTok 即时体验页面编辑器 SDK 是一个轻量级工具，允许您通过向 HTML 页面添加 JavaScript 代码片段来创建各种类型的即时体验页面。该 SDK 不需要下载或安装任何 SDK 包。您可以异步加载 SDK，确保不会给其他页面元素造成延迟。SDK 加载完成后，您可以打开 TikTok 即时体验页面编辑器弹出窗口创建即时体验页面，而无需使用 TikTok 广告管理平台。

目前， TikTok 即时体验页面编辑器 SDK 支持创建以下类型的即时页面：自定义页面、即时表单（线索表单）、应用介绍页和弹出式表单。

使用 SDK 创建即时体验页面后，您可以通过使用 /page/get/ 接口获取即时体验页面的页面 ID。页面 ID 可用于创建广告。

注意
即时体验页面编辑器 SDK 不支持沙箱账号。

使用 TikTok 即时体验页面编辑器 SDK 创建即时体验页面

前提条件

您已经拥有 TikTok API for Business 的使用权限。详见快速入门 - 具体步骤。

步骤

使用 /oauth2/access_token/tip_sdk/create/ 生成 TikTok 即时体验页面编辑器 SDK 的访问令牌。

每个 SDK 访问令牌的有效期为 24 小时。您可以使用 /oauth2/access_token/tip_sdk/validate/ 验证访问令牌是否过期，或在访问令牌过期后使用 /oauth2/access_token/tip_sdk/renew/ 刷新访问令牌。

初始化并加载 SDK。

将以下代码放置在 HTML 页面的 <body> 标签中。

将 your_appid 替换为您自己的应用 ID。若想要查找您的开发者应用的应用 ID，可以导航至 应用管理 > App Detail > 基本信息。

(code HTML html)
<script>
  // Initialize SDK
  window.InstantPageAsyncInit = (val) => {
    InstantPage.init({
      appId: 'your_appid', //App ID of your developer app
      version: 'v1.0' // Only v1.0 for now
    });
  };
</script>

<script async defer crossorigin="anonymous" src="https://sf-unpkg.tiktokcdn.com/obj/unpkg-va/latest/byted/instant_page_sdk/dist/index.js"></script>
(/code)

唤起即时体验页面编辑器。

在适当的时机调用 SDK 函数 InstantPage.start() 来唤起即时体验页面编辑器的弹出窗口。代码需要按照以下格式编写：InstantPage.start(params, callback)。

示例

(code JavaScript JS)
InstantPage.start(
  {
    accountId: 'your_adv_id', //advertiser id
    appId: 'appId', //App ID of your developer app
    ixAccessToken: 'your_SDK_token', //TIP Editor SDK access token
    businessType: 1, // Support 1=Instant Form, 4=App Profile Page, 6=Customized Page, 14=pop-up form, default value: 1
    display: 'popup', // Only popup for now
    actionType: 'create', 
    language: 'en' //  Support ar,de,en,es,fr,hi,id,it,ja,ko,ms,ru,th,tr,vi,zh,zh-Hant, default value: en
  },
  (response) => {
    console.log(response);
    // pageId
    // status 
    // accountId
    // ...
  }
);
(/code)

下表列出了该函数支持的参数。

| 字段 {30%}| 类型{15%} | 描述{55%}  |
| --|---|---|
|accountId {必填}|string| 广告主 ID。 |
|appId {必填}|string|您的开发应用的 ID。<br><br>若想要查找<b>应用 ID</b>，可以导航至<b>[应用管理](https://ads.tiktok.com/marketing_api/apps/)</b> > <b>App Detail</b> > <b>基本信息</b>。|
|ixAccessToken {必填}|string|即时体验页面编辑器 SDK 访问令牌。<br><br>若想获取访问令牌，可使用[/oauth2/access_token/tip_sdk/create/](1820826755283969.html)。|
|actionType {必填}| string | 操作类型。<br><br>枚举值：`create` （创建）。|
|display  {必填}| string |显示格式。<br><br>当前唯一支持的值是`popup`（弹出窗口）。 |
| businessType | number | 页面类型。<br><br>枚举值：<ul><li>`1`：即时表单（线索表单）。</li><li>`4`：应用介绍页。</li><li>`6`：自定义 TikTok 即时体验页面。</li><li>`14`：弹出式表单。</li></ul>默认值： `1`。 |
| language  | string | 编辑器的语言。<br><br>默认值：`en`。<br><br>若想获取支持的值，可查看<a href="#item-link-language支持的值">language支持的值</a>。|

`language`支持的值

| 值  {30%}| 描述 {70%} |
|---|---|
| `ar` | 阿拉伯语 |
| `de` | 德语 |
| `en` | 英语 |
| `es` | 西班牙语 |
| `fr` | 法语 |
| `hi` | 印地语 |
| `id` | 印度尼西亚语 |
| `it` | 意大利语 |
| `ja` | 日语 |
| `ko` | 韩语 |
| `ms` | 马来语 |
| `ru` | 俄语 |
| `th` | 泰语 |
| `tr` | 土耳其语 |
| `vi` | 越南语 |
| `zh` | 简体中文 |
| `zh-Hant` | 繁体中文 |

下表列出了回调函数的返回参数。

| 字段 {30%}| 类型{15%} | 描述{55%}  |
|---|---|---|
| pageId | string | 页面 ID。 |
| status | number | 即时体验页面的状态。<br><br>枚举值：<ul><li>`2`：可投放。</li></ul>|
| accountId | string | 广告主 ID。 |

完整 HTML 代码示例

(code HTML html)
<!DOCTYPE html>
<html lang="en">
<head>
    <title>InstantPage SDK Test</title>
</head>
<style>
    .title {
        display: flex;
        justify-content: center;
        width: 100%;
    }
</style>
<body>
<h1>InstantPage SDK Test</h1>

<!-- select page source -->
<div class="title">
    <button style="margin-top: 32px;font-size: 16px" onclick="start()">Start</button>
</div>

<script>
    /// Initialize SDK
    window.InstantPageAsyncInit = (val) => {
        InstantPage.init({
              appId: 'your_appid', //App ID of your developer app
              version: 'v1.0' // Only v1.0 for now
        });
    };

    function start() {
        // Launch the SDK at the appropriate time
        InstantPage.start(
            {
                accountId: 'your_adv_id', //advertiser id
                appId: 'appId', //App ID of your developer app
                ixAccessToken: 'your_SDK_token', //TIP Editor SDK access token
                businessType: 1, // Support 1=Instant Form, 4=App Profile Page, 6=Customized Page, 14=pop-up form, default value: 1
                display: 'popup', // Only popup for now
                actionType: 'create', // create
                language: 'en' //  Support ar,de,en,es,fr,hi,id,it,ja,ko,ms,ru,th,tr,vi,zh,zh-Hant, default value: en
            },
            (response) => {
                console.log(response);
                // pageId
                // status 2 ready
                // accountId
                // ...
            }
        );
    };
</script>
<script src="https://sf-unpkg.tiktokcdn.com/obj/unpkg-va/latest/byted/instant_page_sdk/dist/index.js"></script>
</body>
</html>
(/code)

常见问题

Q1: 如何更新 SDK？

无需手动更新 SDK，因为 SDK 的链接始终指向最新版本。

Q2: 回调函数的触发时机是什么？

当用户在即时体验页面编辑器中完成即时体验页面的创建且关闭编辑器时，会触发回调函数。若用户尚未完成即时体验页面的创建就关闭编辑器，则不会触发回调函数。