テキスト広告

テキスト広告はテキストベースのネイティブ広告で、Web サイトのコンテンツと自然になじみます。高いクリック率と良好なユーザー体験を提供し、コンテンツに応じて高さが自動で調整されます。

🎯 基本的な使い方

シンプルなテキスト広告

// HTML にコンテナを用意
// <div id="text-container"></div>
 
// SDK の初期化（1 回だけ）
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>マイ Web サイト</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 行に制限（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);

テキスト広告

目次