クイズをイベントサイトに埋め込む方法｜公開前のテストも可能

イベントページやブランドサイト、ブログにクイズを埋め込めば、参加者はそのまま回答・結果確認・シェアまで進めます。iframeを使うと、OOOPEN Labのクイズやインタラクティブモジュールをページに組み込めます。

クイズをWebページに埋め込む方法

表紙・質問・結果ページを設定し、クイズを公開します。
「公開設定」を開き、「公開方法を選択」から「Webページに埋め込む」を選びます。
「iframeコード」ブロックのコードをコピーして、Web担当者に渡します。幅と高さは0〜2,560pxで指定できます。

GA4の注意：FB Pixel・GA4アドオンを利用している場合、iframe内のクイズではGA4計測を続けられます。ただし、埋め込み先サイトのGAにイベントが自動で送られるわけではありません。必要な場合はクロスiframe計測を別途設定してください。

公開前にテストする方法

次のコードを使って表示を確認できます。

<iframe width="500" height="300" title="OOOPEN Lab" src="https://ooopenlab.cc/quiz/8Kldbn7cBG2BsoKGPnDV" frameborder="0"></iframe>

埋め込みクイズでUTMを設定する方法

同じクイズをイベントページ、広告、メール、パートナーサイトに埋め込む場合は、iframeのsrc URLにUTMパラメーターを追加します。OOOPEN Labは各回答のUTMを記録するため、管理画面からレポートを出力して掲載場所ごとの成果を確認できます。

utm_source：流入元（例：facebook、edm、partner_blog）
utm_medium：媒体（例：social、email、cpc）
utm_campaign：キャンペーン名（例：mothers_day_2025）

src URLの?の後ろに追加し、複数の値は&でつなぎます。

<iframe width="500" height="300" title="OOOPEN Lab" src="https://ooopenlab.cc/quiz/8Kldbn7cBG2BsoKGPnDV?utm_source=facebook&utm_medium=social&utm_campaign=mothers_day" frameborder="0"></iframe>

重要：埋め込み元ページのUTMはiframeに引き継がれません

イベントページのURLに付いたUTMは、そのページのものです。クイズに記録したい場合は、iframeのsrc URLに直接UTMを追加してください。詳しくはUTM記録のエクスポートをご覧ください。

レスポンシブ（RWD）iframeの設定

外側のコンテナにpadding-topを設定し、4:3や16:9などの比率を維持します。参考：Responsive Iframe

無料プランでも使える？

無料アカウントでは埋め込み機能は利用できませんが、リンクの共有は可能です。有料ユーザーは「Webページにプロジェクトを埋め込む」アドオンを購入すると、「公開設定」にiframeコードが表示されます。

無料で作って試してみよう

右上の「ログイン／登録」からクリエイター登録すると、無料プランでプロジェクトを作成・編集できます。公開前にプラン比較を確認してください。