文本广告

文本广告是基于文本的原生广告，能与网站内容自然融合。它带来较高的点击率与用户体验，并会根据内容自动调整高度。

🎯 基本用法

简单的文本广告

// 在 HTML 中准备容器
// <div id="text-container"></div>
 
// 初始化 SDK（只需一次）
AdStage.init({
  apiKey: process.env.NEXT_PUBLIC_ADSTAGE_API_KEY
});
 
// 创建基本文本广告
AdStage.ads.text('text-container');

点击事件处理

AdStage.ads.text('text-container', {
  onClick: (adData) => {
    console.log('文本广告被点击:', adData);
    // 可以添加自定义逻辑
  }
});

⚙️ 设置选项

基本选项

选项	类型	默认值	说明
`maxLines`	`number`	`3`	要显示的最大行数
`style`	`string`	`'default'`	样式主题
`onClick`	`function`	`undefined`	点击时执行的回调函数

筛选选项

选项	类型	默认值	说明
`adId`	`string`	`undefined`	指定特定的广告 ID
`language`	`'ko' \| 'en' \| 'ja' \| 'zh'`	`undefined`	按语言筛选
`deviceType`	`'MOBILE' \| 'DESKTOP'`	`undefined`	按设备筛选
`country`	`'KR' \| 'US' \| 'JP' \| 'CN' \| 'DE'`	`undefined`	按国家筛选

参考：文本广告会根据内容长度自动调整高度（height: 'auto'）。

💡 实际实现示例

最简单的 CDN 方式，可以直接在 HTML 中使用。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文本广告示例</title>
</head>
<body>
  <h1>我的网站</h1>
  
  <!-- 文本广告容器 -->
  <div id="text-container" style="width: 100%; max-width: 600px; margin: 20px auto; padding: 16px; border: 1px solid #ddd; border-radius: 8px;">
    加载中...
  </div>
 
  <!-- 加载 AdStage SDK -->
  <script src="https://unpkg.com/@adstage/web-sdk/dist/index.umd.js"></script>
  <script>
    // 初始化 SDK
    AdStage.init({
      apiKey: 'your-api-key'
    });
 
    // 创建文本广告
    AdStage.ads.text('text-container', {
      maxLines: 3
    });
  </script>
</body>
</html>

🚀 高级功能

行数限制

可以限制文本广告显示的行数。

// 限制为 1 行（单行文本广告）
AdStage.ads.text('text-container', {
  maxLines: 1
});
 
// 允许最多 5 行
AdStage.ads.text('text-container', {
  maxLines: 5
});

响应式行数调整

根据屏幕尺寸动态调整行数的方法。

// 利用媒体查询实现的响应式方案
const getResponsiveMaxLines = () => {
  if (window.innerWidth <= 768) {
    return 2;  // 移动端: 2 行
  } else if (window.innerWidth <= 1024) {
    return 3;  // 平板: 3 行
  } else {
    return 4;  // 桌面端: 4 行
  }
};
 
AdStage.ads.text('text-container', {
  maxLines: getResponsiveMaxLines(),
  deviceType: window.innerWidth <= 768 ? 'MOBILE' : 'DESKTOP'
});
 
// 窗口调整大小时重新创建
window.addEventListener('resize', () => {
  // 移除原有广告后重新创建
  AdStage.ads.destroy(slotId);
  slotId = AdStage.ads.text('text-container', {
    maxLines: getResponsiveMaxLines(),
    deviceType: window.innerWidth <= 768 ? 'MOBILE' : 'DESKTOP'
  });
});

指定特定的广告 ID

只想显示特定文本广告时使用。

AdStage.ads.text('text-container', {
  maxLines: 3,
  adId: 'text-ad-456'  // 特定广告 ID
});

🔧 优化提示

1. 指定行数

用 maxLines 指定要显示的最大行数（数字，默认值 3）。文本广告的高度会按内容长度自动（height: 'auto'）调整。

// 最多显示 3 行（默认值）
AdStage.ads.text('text-container', {
  maxLines: 3
});

2. 后台加载

广告在后台加载，因此可以立即获得广告位 ID。

// 立即返回广告位 ID
const slotId = AdStage.ads.text('text-container');
console.log('广告位已创建:', slotId);  // 立即执行
 
// 实际广告为异步加载

3. 利用自动清理

当容器从 DOM 中被移除时，广告也会自动清理。

const slotId = AdStage.ads.text('text-container');
 
// 从 DOM 移除容器时会自动清理
document.getElementById('text-container').remove();
// 无需手动调用 destroy()

🎨 样式设计

利用 CSS 类

可以利用 SDK 自动添加的 CSS 类进行样式设计。

/* 广告容器基本样式 */
.adstage-text-ad {
  position: relative;
  overflow: hidden;
  font-family: inherit;
  line-height: 1.6;
}
 
/* 加载状态 */
.adstage-loading {
  opacity: 0.7;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}
 
@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
 
/* 加载完成 */
.adstage-loaded {
  opacity: 1;
  transition: opacity 0.3s ease;
}
 
/* 错误状态 */
.adstage-error {
  border: 1px solid #ff6b6b;
  background-color: #ffe0e0;
}

确认广告位状态

// 确认所有广告位
const allSlots = AdStage.ads.getAllSlots();
console.log('全部广告位:', allSlots);
 
// 确认特定广告位
const slot = AdStage.ads.getSlotById(slotId);
console.log('广告位信息:', slot);

文本广告

目录