ステップ 1
親ページがiframeを読み込みます
あなたのサイトは、/embed/{gameSlug}/frame/ を指す iframe を、tenantId およびオプションの mode または campaignId クエリ パラメータとともにレンダリングします。
Embed API ドキュメント
まずライブデモから始め、親ページのイベントを確認し、iframeとリスナーのパターンを自分のサイトにコピーしてください。この手順は、すべてのGames I Know iframeゲームで有効です。
embed キーを取得しますTic Tac Toe iframe で操作を実行してください。イベントログには、GAME_STARTED、ゲームプレイイベント、および完了ペイロードが、親ページが受け取ったとおりに表示されます。
プラットフォーム全体のイベント契約
Games I Know は、プラットフォーム上のすべてのゲーム (現在 Tic Tac Toe、Four in a Row、Bingo、I Know) と、今後追加されるすべての新しい embed 対応ゲーム) に対して embed イベントを送信します。タイトルごとに個別の統合は必要ありません。標準契約 (準備完了、GAME_STARTED、ゲームプレイ イベント、勝者データによる完了、署名付き結果) に対して親ページ リスナーを 1 つ構築し、現在および今後追加されるすべての embed ゲームで再利用します。
ゲームをウェブサイト上のどこに表示させるべきか既に分かっている場合は、この方法を使用してください。
テナントIDを使用して /embed/{gameSlug}/frame/ を使用してください。SEOランディングページには iframe を使用しないでください。
ステップに進むdata.source === "gamesiknow" でフィルタリングし、GAME_STARTED、GAME_COMPLETED、およびバージョン 1 のゲームプレイ イベントを処理します。
ステップに進むパートナーダッシュボードから、実際のテナントIDを使用してください。
<iframe
src="https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID"
title="Tic Tac Toe by Games I Know"
width="100%"
height="640"
style="border:0;border-radius:16px;max-width:420px;display:block;margin:0 auto;"
loading="lazy"
allow="fullscreen"
referrerpolicy="no-referrer-when-downgrade"
allowfullscreen
></iframe>Games I Know embed は、ドメイン上のサンドボックス化された iframe です。API に対してテナントとドメインを検証し、window.postMessage を介して親ページと通信します。
ステップ 1
あなたのサイトは、/embed/{gameSlug}/frame/ を指す iframe を、tenantId およびオプションの mode または campaignId クエリ パラメータとともにレンダリングします。
ステップ 2
iframe は GET /embed/config (または /api/embed/config) を呼び出します。Games I Know は、パートナーアカウント、許可されたドメイン、ゲームアクセス、および AI クォータを確認します。サーバー側の embed_ ロードされた分析イベントが記録されます。
ステップ 3
iframe は、親ページに ready イベントを送信します。これにより、読み込み状態を表示したり、payload.embedHeight を使用してフレームのサイズを変更したりできます。
ステップ 4
ゲームプレイが開始されると、embed対応ゲームはすべて親ページにGAME_STARTEDを送信し、サーバー側でgame_startedを自動的に記録します。ウェブサイトから分析APIを呼び出す必要はありません。
ステップ 5
試合中、移動やモード変更などのバージョン1のゲームプレイイベントによって、UIや内部分析が更新されます。
ステップ 6
完了すると、embed 対応ゲームはすべて、結果、勝者、プレイヤーを含む GAME_COMPLETED を親サーバーに送信し、ページに結果を即座に表示できるようにします。また、iframe は POST /embed/results を介して結果に署名し、署名が成功した場合は GAME_COMPLETED に resultId と signedToken を含めます。バックエンドでは、報酬を付与する前に、パートナーサーバーキーを使用してこれらのトークンを検証できます。
postMessageの2つのフォーマット
ライフサイクルイベント 平らな物体を使用する event: "GAME_STARTED" or event: "GAME_COMPLETED". ゲームプレイイベント データをラップする version: 1 ネストされた payload. 常にフィルターをかける data.source === "gamesiknow".
ほとんどの統合は、ドメインの登録、トークンの生成、iframeのインストール、そして開始イベントと完了イベントの監視という4つの決定事項から成ります。
Games I Know および embed をホストするすべてのドメインを追加します。ドメインは正規化されているため、example.com と www.example.com は一貫して処理されます。
各ウェブサイトごとに個別のembedトークンを作成してください。これにより、分析データが整理され、将来のドメインベースの料金体系に対応できるようになります。
iframe またはレスポンシブラッパーを、CMS のカスタム HTML ブロック、Web サイトビルダーの embed エリア、またはカスタム フロントエンド テンプレートにコピーしてください。
親ページで GAME_STARTED および GAME_COMPLETED postMessage イベントを処理して、試合の状態と勝者の詳細を表示します。報酬を授与する前に、パートナーサーバーキーを使用してバックエンドからの署名済み結果を検証してください。
幅
100% を使用すると、embed が利用可能なコンテンツ列を埋めます。
身長
ほとんどのゲームでは640pxです。Tic Tac Toeは600pxでも動作します。自動リサイズするには、readyイベントのpayload.embedHeightを使用してください。
ゲーム
/embed/tic-tac-toe/frame/、/embed/four-in-a-row/frame/、/embed/bingo/frame/、または/embed/i-know/frame/を使用してください。
モード
プレイヤーが選択する場合はモードを省略するか、embed が最初に AI を要求するようにする場合は mode=ai を渡してください。
AI クォータが利用可能な場合、プレイヤーはゲーム内でマッチタイプを選択します。
<iframe
src="https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=TENANT_ID"
width="100%"
height="640"
style="border:0;border-radius:16px;max-width:420px;display:block;margin:0 auto;"
allow="fullscreen"
loading="lazy"
title="Tic Tac Toe by Games I Know"
></iframe>まずAIを要求します。割り当て量が上限に達した場合は、PvPに自動的に切り替えます。
<iframe
src="https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=TENANT_ID&mode=ai&campaignId=homepage-widget"
width="100%"
height="640"
style="border:0;border-radius:16px;max-width:420px;display:block;margin:0 auto;"
allow="fullscreen"
loading="lazy"
title="Tic Tac Toe vs AI by Games I Know"
></iframe>フレーム URL は /embed/{gameSlug}/frame/ を使用します。ゲームプレイのない SEO ランディング ページは /embed/{gameSlug}/ で公開されています。
| パラメータ | 必須 | 説明 |
|---|---|---|
| テナントID | はい | Games I Know パートナーダッシュボードに表示されるパートナーテナントID。レガシー統合の場合は、partnerIdとしても使用できます。 |
| モード | いいえ | 強制的にAIモードを要求するには、AIに設定します。サーバー側のクォータとドメインルールは引き続き適用されます。AIが利用できない場合は、プレイヤー対プレイヤーにフォールバックします。 |
| キャンペーンID | いいえ | オプションのキャンペーンラベルは、postMessageイベントに反映され、A/Bテストやページレベルのセグメンテーションのためにパートナー分析データに保存されます。 |
同じ契約が、Tic Tac Toe、Four in a Row、Bingo、I Know、および今後の embed リリースに適用されます。
ルール 1
フィルターソース
data.sourceがgamesiknowでない限り、メッセージを無視します。
ルール 2
ライフサイクルを管理する
試合の状態、勝者名、結果については、GAME_STARTEDとGAME_COMPLETEDを使用してください。
ルール 3
報酬を確認する
報酬を付与する前に、resultIdとsignedTokenをバックエンドに転送してください。
| イベント | 発射すると | 形式 | 主要分野 |
|---|---|---|---|
| 準備ができて | Embed が初期化され、設定が読み込まれました。 | すべてのゲームでゲームプレイ(バージョン1)を使用するか、一部のライフサイクルラッパーではフラットな状態になります。 | matchId、モード、embedHeight |
| ゲーム開始 | すべての embed 可能なゲーム (現在および将来のゲーム)。試合開始時 (たとえば、最初の手番または AI ラウンド開始時) に発火します。 | フラットなライフサイクル | game、partnerId、campaignId、mode、matchId (ゲームプレイ ストリームを介して暗黙的) |
| ゲーム完了 | 試合終了時に、すべての embeddable ゲームが記録されます。結果、勝者、勝者プレイヤー名、およびプレイヤーが含まれるため、親ページは結果を即座に表示できます。また、サーバー側の署名が成功した場合は、resultId と signedToken も含まれます。 | フラットなライフサイクル | 結果、勝者、勝者プレイヤー名、勝者プレイヤーID、プレイヤー、スコア、期間(秒)、結果ID、署名済みトークン |
| 埋め込みフルスクリーン変更 | プレイヤーはin-embedのフルスクリーンを切り替えます。 | フラットなライフサイクル | ペイロードアクティブ ブール値 |
形: { source, game, version: 1, event, payload }
すべての embeddable ゲーム投稿 GAME_COMPLETED 親に outcome, winner, そして players 試合が終わったとき。署名が成功したとき、 GAME_COMPLETED また、 resultId そして signedToken バックエンド検証のため。
{
"source": "gamesiknow",
"event": "GAME_STARTED",
"game": "tic-tac-toe",
"partnerId": "partner_your_tenant",
"campaignId": "homepage-widget",
"mode": "ai"
}{
"source": "gamesiknow",
"event": "GAME_COMPLETED",
"game": "tic-tac-toe",
"resultId": "res_abc123xyz",
"partnerId": "partner_your_tenant",
"campaignId": "homepage-widget",
"status": "completed",
"outcome": "player_1",
"score": 100,
"durationSeconds": 24,
"winnerPlayerId": "player_1",
"winnerPlayerName": "Player X",
"winner": {
"playerId": "player_1",
"participant": "player_1",
"type": "human",
"label": "Player 1",
"name": "Player X",
"score": 100
},
"players": [
{
"playerId": "player_1",
"participant": "player_1",
"type": "human",
"label": "Player 1",
"name": "Player X",
"score": 100,
"status": "winner"
},
{
"playerId": "player_2",
"participant": "ai_bot",
"type": "ai",
"label": "AI BOT",
"name": "AI Bot",
"score": 60,
"status": "lost"
}
],
"signedToken": "eyJ..."
}プレイヤー1
最初の人間プレイヤーが勝利しました。
プレイヤー2
2人目の人間プレイヤーが勝利しました。
AIボット
AI 対戦相手が勝ちました。
描く
勝者なし。
Tic Tac Toe および Four in a Row でのみサポートされています。ゲームのスラッグとアクションを指定して、iframe のコンテンツウィンドウをターゲットにしてください。
// Parent page -> iframe (Tic Tac Toe or Four in a Row)
const iframe = document.querySelector("iframe");
iframe.contentWindow.postMessage(
{ game: "tic-tac-toe", action: "reset" },
"https://gamesiknow.com"
);
iframe.contentWindow.postMessage(
{ game: "tic-tac-toe", action: "get_state" },
"https://gamesiknow.com"
);このリスナーを、iframe が配置されているページにコピーしてください。このリスナーは、準備完了状態、ゲーム開始、ゲームプレイイベント、署名付き完了、およびフルスクリーンへの変更を処理します。
ソースでフィルタリングし、試合中の勝者UIおよびゲームプレイイベントのためにGAME_STARTEDとGAME_COMPLETEDを処理します。
/**
* Games I Know embed listener (parent page)
* Handles lifecycle events (GAME_STARTED, GAME_COMPLETED) and
* version 1 gameplay events (move, mode_change, ...).
*/
const TRUSTED_ORIGIN = "https://gamesiknow.com"; // or your self-hosted origin
window.addEventListener("message", (event) => {
if (TRUSTED_ORIGIN !== "*" && event.origin !== TRUSTED_ORIGIN) return;
const data = event.data;
if (!data || data.source !== "gamesiknow") return;
// --- Lifecycle events (flat top-level event name) ---
if (data.event === "GAME_STARTED") {
console.log("Match started", {
game: data.game,
mode: data.mode,
partnerId: data.partnerId,
campaignId: data.campaignId,
});
return;
}
if (data.event === "GAME_COMPLETED") {
const winnerLabel = data.winner?.name ?? data.winnerPlayerName ?? null;
console.log("Match completed", {
game: data.game,
outcome: data.outcome, // player_1 | player_2 | ai_bot | draw
winner: data.winner,
winnerName: winnerLabel,
players: data.players,
});
if (winnerLabel) {
document.getElementById("game-winner")!.textContent = `${winnerLabel} won!`;
} else if (data.outcome === "draw") {
document.getElementById("game-winner")!.textContent = "Draw";
}
// For rewards: send resultId + signedToken to YOUR backend (never call verify from the browser)
if (data.resultId && data.signedToken) {
fetch("/api/reward-winner", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({
resultId: data.resultId,
signedToken: data.signedToken,
userId: currentUserId,
}),
});
}
return;
}
if (data.event === "EMBED_FULLSCREEN_CHANGE") {
document.body.classList.toggle("embed-fullscreen-active", Boolean(data.payload?.active));
return;
}
// --- Gameplay events (version 1 envelope) ---
if (data.version === 1 && typeof data.event === "string") {
switch (data.event) {
case "ready":
resizeEmbed(data.payload?.embedHeight);
break;
case "mode_change":
console.log("Mode changed", data.payload?.mode);
break;
case "move":
console.log("Move", data.payload);
break;
default:
console.log("Gameplay event", data.event, data.payload);
}
}
});
function resizeEmbed(height) {
const iframe = document.querySelector('iframe[src*="/embed/"]');
if (iframe && typeof height === "number") iframe.style.height = `${height}px`;
}統合チェックリスト
親ページで GAME_COMPLETED を使用して、勝者を表示してください。報酬については、バックエンドからの署名済み結果をパートナーサーバーキーで検証してください。ブラウザ JavaScript から検証 API を呼び出さないでください。
サーバー側のみ。Authorization: Bearer gik_psk_… で、GAME_COMPLETED の resultId と signedToken を使用します。
POST https://api.gamesiknow.com/embed/results/verify
Authorization: Bearer gik_psk_your_secret_key
Content-Type: application/json
{
"resultId": "res_abc123xyz",
"signedToken": "signed_token_from_game_completed"
}
Call from your backend server only. The partner server key must belong to the same tenant as the signed result. Browser requests are rejected.{
"ok": true,
"resultId": "res_abc123xyz",
"partnerId": "partner_your_tenant",
"gameSlug": "tic-tac-toe",
"outcome": "player_1",
"score": 100,
"durationSeconds": 24
}バックエンドは親ページからトークンを受け取り、Games I Knowで検証した後、報酬を付与します。
// Example: Node.js / Express handler on YOUR server
app.post("/api/reward-winner", async (req, res) => {
const { resultId, signedToken, userId } = req.body;
const verify = await fetch("https://api.gamesiknow.com/embed/results/verify", {
method: "POST",
headers: {
"content-type": "application/json",
authorization: `Bearer ${process.env.GAMESIKNOW_PARTNER_SERVER_KEY}`,
},
body: JSON.stringify({ resultId, signedToken }),
});
if (!verify.ok) return res.status(403).json({ error: "Invalid result" });
const result = await verify.json();
if (result.outcome !== "player_1") {
return res.status(400).json({ error: "Player did not win" });
}
await grantReward(userId, result);
return res.json({ ok: true });
});Games I Know は、iframe がロードされ、プレイヤーが操作を行う際に、これらのイベントを自動的に記録します。記録されたイベントは、パートナーダッシュボードに表示されます。同じデータを独自のデータベースに取り込むには、インストールページでパートナーサーバーキーを作成し、バックエンドサーバーからのみ GET /partners/analytics を呼び出してください。
パートナーダッシュボード → インストールでパートナーサーバーキーを生成し、サーバーシークレットとして保存します。以下のクエリパラメータを使用してエクスポートをフィルタリングします。
GET https://api.gamesiknow.com/partners/analytics
認証: Bearer gik_psk_your_secret_key
オプションのクエリパラメータ:
domain 登録済みウェブサイトのホスト名 (example.com)
campaignId iframe パラメータのcampaignIdの値
gameSlug tic-tac-toe | four-in-a-row | bingo | i-know
from 開始日 (UTC、YYYY-MM-DD)
to 終了日 (UTC、YYYY-MM-DD)
例:
/partners/analytics?domain=www.example.com&gameSlug=tic-tac-toe&from=2026-05-01&to=2026-05-31
バックエンドサーバーからのみ呼び出してください。パートナーサーバーキーをブラウザに公開しないでください (JavaScript)。embed対応ゲームはすべて同じコアイベントを送信します。タイトルごとのタイミングと追加機能については、以下で比較してください。
| ゲーム | ゲーム開始 | 完了シグナル | 署名済み | 強制的に AI が実行されました | Height | 親コマンド |
|---|---|---|---|---|---|---|
| Tic Tac Toe | 最初の動きまたはAI開始 | ゲーム完了 | はい | はい | 640px | リセット、get_state |
| Four in a Row | 最初の動きまたはAI開始 | ゲーム完了 | はい | はい | 640px | リセット、get_state |
| Bingo | 試合開始 (AI または PvP) | ゲーム完了 | はい | はい | 640px | まだありません |
| I Know | 試合開始 (AI または PvP) | ゲーム完了 | はい | はい | 640px | まだありません |
このページは技術リファレンスです。プラットフォーム固有のインストール手順や垂直配置に関するアドバイスが必要な場合は、これらのガイドをご利用ください。すべてのガイドは、上記で説明した同じ iframe およびイベントモデルを使用しています。
Framework-specific iframe placement, event listeners, and production notes.
Copy-paste embed guides for no-code and low-code site builders.
Placement and UX recommendations for common website types.
iframe ゲーム、HTML5 ウィジェット、無料の embed プレイ可能なゲームなどの概要ページをお探しですか?すべて閲覧 ハブ上の embed ガイド。
統合の詳細、現在のゲームサポート、コマンド、署名付き結果、および将来のゲーム互換性に関する回答。
はい。Games I Know embed は標準の iframe HTML を使用するため、WordPress のカスタム HTML ブロック、Webflow embed 要素、Wix および Squarespace のカスタム コード領域、静的 HTML、React、Next.js、およびその他のカスタム サイトで動作します。まず、パートナー ダッシュボードで Web サイト ドメインを登録し、生成されたフレーム スニペットをゲームを表示するページに貼り付けてください。
/embed/{gameSlug}/ は、ゲーム embed の公開ランディングページです。/embed/{gameSlug}/frame/ は、ウェブサイトに貼り付ける必要がある iframe ランタイムです。iframe コードでは、必ず /frame/ URL を使用してください。これにより、プレイ可能なゲームがロードされ、テナントとドメインが検証され、親ページイベントが送信されます。
はい。Games I Know iframe ゲームは、モバイル、タブレット、ラップトップ、デスクトップのブラウザ向けに設計されています。ほとんどの embed では、幅を "100%" に設定し、高さは約 640px を推奨します。また、ready イベントをリッスンして payload.embedHeight を使用すれば、親ページで iframe のサイズを自動的に変更できます。
Games I Know、iframe、embedは、embedベータ版期間中は無料です。利用開始にクレジットカードは不要で、現在のベータ版embedには広告は含まれていません。無料のパートナーアカウントを作成し、ドメインを登録して、ダッシュボードからiframeスニペットを生成してください。
はい。パートナーアカウントでは、テナントIDとドメイン制限付きのiframeスニペットが提供されます。iframeはフレームURLとともにテナントIDを送信するため、Games I Knowはパートナー、許可されたドメイン、ゲームアクセス、AIクォータ、分析キャンペーン、および結果検証フローを検証できます。
embed はドメイン制限付きです。誰かがあなたの iframe スニペットを許可されていない Web サイトにコピーした場合、Games I Know はリクエストの発信元をパートナー アカウント用に設定されたドメインと照合し、承認されていない使用をブロックします。Web サイトごと、またはキャンペーンごとに、より詳細な分析を行いたい場合は、個別のキャンペーン ID を使用してください。
Tic Tac Toe、Four in a Row、Bingo、およびI Knowは、現在iframeおよびembedをサポートしています。各ゲームは、準備完了状態、ゲーム開始、ゲームプレイ、完了、勝者データ、分析、および結果検証のために、標準のembedイベント契約を送信します。新しいembed対応ゲームも同じイベントパターンに従うことが想定されているため、パートナーは統合を再構築する必要はありません。
embeddable のすべてのゲームは、2 つの postMessage フォーマットを使用します。ライフサイクル イベントは、ソース: gamesiknow と ready、GAME_STARTED、GAME_COMPLETED、EMBED_FULLSCREEN_CHANGE などのイベント値を持つフラット シェイプを使用します。ゲームプレイ イベントは、バージョン: 1 と ready、mode_change、move、reset、undo、state などのネストされたイベント名を使用します。常に data.source === "gamesiknow" でフィルタリングしてください。
はい。試合開始時にGAME_STARTEDイベントをリッスンし、プレイ中はmoveやmode_changeなどのゲームプレイイベントを使用し、試合終了時にはGAME_COMPLETEDイベントを使用します。GAME_COMPLETEDには、結果、勝者、プレイヤー、スコア、期間、および署名可能な結果識別子が含まれます。サーバーサイド分析では、ロード、開始、完了、ブロックされた試行、およびCTAクリックも記録されます。
試合終了時には GAME_COMPLETED を使用してください。すべての embed 対応ゲームは、結果、勝者、勝者プレイヤー名、およびプレイヤーを含むこのライフサイクル イベントを送信します。GAME_COMPLETED に resultId と signedToken が含まれている場合は、それらをバックエンドに転送し、報酬やクレジットを付与する前に、パートナー サーバー キーを使用して POST /embed/results/verify を呼び出してください。
iframe をホストするページに window.addEventListener("message", handler) を追加します。ハンドラーでは、event.data.source === "gamesiknow" でない限りメッセージを無視します。ライフサイクル イベントの場合は event.data.event で、ゲームプレイ イベントの場合は event.data.event と event.data.version === 1 で分岐します。必要に応じて、event.origin を許可された Games I Know オリジンと照合します。
親ページで GAME_COMPLETED を使用して、勝者を即座に表示します (結果、勝者、勝者プレイヤー名、プレイヤー)。報酬については、GAME_COMPLETED から resultId と signedToken をバックエンドに送信し、ダッシュボードからパートナーサーバーキーを使用して Authorization: Bearer gik_psk_… を指定して POST /embed/results/verify を呼び出します。検証エンドポイントはサーバー側のみで、ブラウザ JavaScript から呼び出さないでください。検証が成功した後にのみ報酬を付与してください。
必須: tenantId (パートナーテナント ID)。オプション: mode=ai は、クォータが許す場合に強制的に AI モードを要求する場合、campaignId は分析をセグメント化する場合です。フレーム URL は /embed/{gameSlug}/frame/?tenantId=YOUR_TENANT_ID のようになります。
はい。iframe URLにmode=aiを追加して、最初にAIモードをリクエストしてください。サーバー側のクォータとドメインルールは引き続き適用されるため、AIモードが利用できない場合、またはクォータが上限に達した場合は、embedでプレイヤー選択またはプレイヤー対プレイヤーにフォールバックできます。
Tic Tac Toe と Four in a Row は、ゲームがゲームスラッグに設定され、アクションが reset または get_state に設定された親メッセージを受け入れます。iframe は、状態ゲームプレイイベントで応答します。その他の embed ゲームは、まだ親コマンドを公開していません。
トークンを生成する前に、ウェブサイトのドメインが有効であることを確認してください。
ウェブサイトまたはキャンペーングループごとに、個別のトークンまたはキャンペーンIDを使用してください。
親ページでGAME_STARTEDとGAME_COMPLETEDのイベントを監視します。
Games I Know のブランドロゴを embed 内に表示したままにしてください。
賞品やクレジットを付与する前に、バックエンドで署名済みの結果を確認してください。
AI モードを強制し、AI の割り当て量が上限に達した場合に PvP にフォールバックするテスト。
ウェブサイト、CMS、および希望するゲーム配置場所を共有してください。イベント配線について一緒に確認させていただきます。