AI Search
New
InMobi Now
提交支持工单
后退

WebX 集成

Chinese
English
Chinese

InMobi WebX 使发布商能够通过轻量级 JavaScript 集成来渲染广告，从而实现网站盈利。

先决条件

集成前请确保您已具备以下条件：

  • 发布商 ID（由 InMobi 提供）。
  • 一个有效的 HTML 容器，广告将在此容器中呈现。
  • 请确保满足以下同意和隐私要求：  
    • 将InMobi（供应商 ID：333）添加  到您的同意管理平台 (CMP) 供应商列表中。
    • 请确保已为 InMobi 启用以下功能：
      • 目的 1 – 信息的存储和访问
      • 目的 2 – 基本广告
      • 目的 7 – 测量
      • 要启用个性化广告，还需启用：
        • 目的 3 – 个性化广告
        • 目的 4 – 个性化内容

创建默认位置

在开始进行 InMobi WebX 集成之前，您需要先创建默认网站位置。 

按照“默认网站位置”中的步骤 开始创建网站位置。

笔记

请联系您的客户成功经理，以在您的库存上激活 WebX。

集成方法

该SDK支持多种集成方式，具体取决于您的使用场景：

方法 描述
仅脚本集成（推荐） 页面加载时自动加载并渲染广告
手动初始化 可控制广告加载时间
动态广告位集成 根据用户互动信号加载广告

方法一：仅脚本集成 

使用此方法可实现快速简便的集成。它使用脚本属性来配置 SDK。页面加载时，SDK 会自动加载并渲染广告。 

  1. 添加一个容器元素来显示广告。 
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"inmobi-ad-container"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
  2. 添加包含发布者 ID 的 SDK 脚本 ，并使用脚本属性对其进行配置：  "https://app.inmobi.com/web-sdk?publisherId=<inmobi_accountID>"。 
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">defer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://app.inmobi.com/web-sdk?publisherId=<inmobi_accountID>"</span> <span class="hljs-attr">data-mode</span>=<span class="hljs-string">"auto"</span> <span class="hljs-attr">data-container</span>=<span class="hljs-string">"inmobi-ad-container"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
可配置参数

属性

 描述
data-mode="auto" 启用自动广告加载
data-container 指定广告将要渲染的容器 ID。

笔记

支持多个广告位 

除了单个广告容器外，发布商现在还可以在同一页面上渲染多个广告。要启用此功能，请在 DOM 中使用前缀`ad-slot-`（例如，`ad-slot-1`、`ad-slot-2` 等）定义多个容器。SDK 将自动检测所有此类容器，并在每个位置渲染广告。

只需要一个带有主容器的“script”标签；可以在 DOM 中添加额外的ad-slot-*容器，SDK 会自动检测到这些容器。

例子
<span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">title</span>></span>InMobi Ad Example<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>

<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>My Website<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>

<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"inmobi-ad-container"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>

<span class="hljs-tag"><<span class="hljs-name">script</span>
  <span class="hljs-attr">defer</span>
  <span class="hljs-attr">src</span>=<span class="hljs-string">"https://app.inmobi.com/web-sdk?publisherId=<inmobi_accountID>"</span>
  <span class="hljs-attr">data-mode</span>=<span class="hljs-string">"auto"</span>
  <span class="hljs-attr">data-container</span>=<span class="hljs-string">"inmobi-ad-container"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">script</span>></span>

<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>

方法二：手动集成

此方法允许您控制广告的加载时间和位置。在此模式下，SDK 仅在init()被调用时运行。它适用于：

  • 单页应用程序（React、Angular、Vue）
  • 动态页面内容
  • 广告延迟加载
  • 自定义广告投放逻辑
  1. 添加一个容器元素来显示广告。 
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ad-slot"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
  2. 添加包含发布商 ID 的 SDK 脚本，并使用脚本属性对其进行配置。 
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">defer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://app.inmobi.com/web-sdk?publisherId=<inmobi_accountID>"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
  3. 页面加载完成后调用 InMobiWebSDK.init() 。调用此方法后，SDK 将在指定的容器内加载广告 init() 。 
    
<span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">"DOMContentLoaded"</span>, <span class="hljs-keyword">function</span> () {

  <span class="hljs-title class_">InMobiWebSDK</span>.<span class="hljs-title function_">init</span>({
    <span class="hljs-attr">containerId</span>: <span class="hljs-string">"ad-slot"</span>
  });

});
可配置信号

您可以提供以下信号，以帮助 SDK 优化广告投放。

信号

类型

选修的

描述

示例值

containerId

细绳

不

广告将显示在容器（html div）中

"inmobi-ad-container"

slotSize

字符串或数组

是的

广告位尺寸。SDK 使用此信息请求兼容的广告素材。

"300x250", ["300x250","336x280"]

format

细绳

是的

该广告位支持的广告格式。有助于选择兼容的广告素材。

banner, native, video, interstitial

placement

细绳

是的

描述广告在页面上的显示位置。有助于优化布局和竞价需求。

above_fold, in_article, sidebar, footer

contentCategory

细绳

是的

用于上下文定向的页面上下文类别。

sports, tech, finance, gaming

summaryType

细绳

是的

用于情境定向的 AI 生成的摘要类型。

key-points, tldr, teaser

keywords

细绳

是的

发布商提供的页面关键词，用于改进上下文定向。

["AI","machine learning","startups"]

userConsent

细绳

是的

指示用户是否已同意接收个性化广告。此项为隐私合规要求。

true, false

gdprApplies

细绳

是的

指示 GDPR 是否适用于用户会话。

true

usPrivacyString

细绳

是的

CCPA/美国隐私字符串，用于合规性。

"1YYN"
例子
<span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>InMobi Web SDK Example<span class="hljs-tag"></<span class="hljs-name">title</span>></span>

<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">defer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://app.inmobi.com/web-sdk?publisherId=<inmobi_accountID>"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>

<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>

<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>My Website<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>

<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ad-slot"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>

<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript">
<span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">"DOMContentLoaded"</span>, <span class="hljs-keyword">function</span> () {

  <span class="hljs-title class_">InMobiWebSDK</span>.<span class="hljs-title function_">init</span>({
    <span class="hljs-attr">containerId</span>: <span class="hljs-string">"ad-slot"</span>,
    <span class="hljs-attr">slotSize</span>: [<span class="hljs-string">"300x250"</span>]
  });

});
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>

<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>

方法三：动态广告位集成

这种方法可以根据用户互动情况（例如页面停留时间或滚动深度）动态加载广告。它适用于：

  • 延迟加载广告
  • 在长篇内容中插入广告
  • 提高可视性指标
  • 根据用户行为控制广告的展示时间
工作原理

该SDK会根据用户互动情况而不是页面加载情况来加载广告。

  • 您可以配置一个或多个触发条件（例如，页面停留时间或滚动深度）。
  • SDK 初始化后会监控这些条件。
  • 当满足任何条件时，SDK 会自动创建广告容器（如果需要），将其插入 DOM 中，并渲染广告。
  • 如果定义了多个触发器，则第一个满足的条件会触发广告加载。
支持的触发器配置

范围

类型

必需的

描述

例子

minSeconds

数字

不

Minimum time (in seconds) the user must spend before the ad can be inserted

10

minViewabilityPercentage

number

No

The percentage of page scroll after which the ad will be inserted

50

Note

  • At least one trigger parameter must be provided.
  • If multiple triggers are configured, the earliest satisfied condition will load the ad.
  • The SDK automatically creates the ad container.
Example
<span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>InMobi Web SDK Example<span class="hljs-tag"></<span class="hljs-name">title</span>></span>

<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">defer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://app.inmobi.com/web-sdk?publisherId=<inmobi_accountID>"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>

<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>

<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>My Website<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>

<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ad-slot"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>

<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript">
<span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">"DOMContentLoaded"</span>, <span class="hljs-keyword">function</span> () {

  <span class="hljs-title class_">InMobiWebSDK</span>.<span class="hljs-title function_">init</span>({
    <span class="hljs-attr">minSeconds</span>: <span class="hljs-number">3</span>,
    <span class="hljs-attr">minViewabilityPercentage</span>: <span class="hljs-number">50</span>,
  });

});
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>

<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>

无填充事件监听器

当某个广告位没有可用广告时，SDK 会NO_FILL在窗口对象上触发一个自定义事件。您可以监听此事件以执行备用操作。 

<span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'NO_FILL'</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) { 

 <span class="hljs-keyword">const</span> slotId = event.<span class="hljs-property">detail</span>.<span class="hljs-property">slotId</span>; 

 <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'No fill for slot:'</span>, slotId); 

});

最佳实践

  • 始终使用该属性加载 SDK defer。
  • 请确保容器存在后再加载广告。
  • 如果要在页面上放置多个广告，请使用唯一的容器 ID。
  • 初始化后避免动态移除广告容器。

故障排除

如果广告无法显示，请检查以下各项：

  • 发布 者 ID 正确。
  • 容器 ID存在于 DOM 中。
  • SDK脚本加载成功。
  • 浏览器控制台中没有 JavaScript 错误。

如需更多帮助，请联系我们。

本页内容

最后更新于 : 21 Jul, 2026
✕

You are almost there...

By installing this SDK update, you agree that your Children Privacy Compliance setting remains accurate or that you will update that setting, whenever there is a change in your app's audience. You may update the app's Children Privacy Compliance settings at https://publisher.inmobi.com/my-inventory/app-and-placements.

I AGREE