スコアカードの埋め込み

公開済みのスコアカードは自社サイト内に埋め込んで運用できます。1行のscriptタグを追加するだけで、回答者の進行に合わせて自動で高さを調整するレスポンシブなiframeが生成されます。

埋め込みを有効にする

埋め込み機能はスコアカードごとに初期状態で無効化されています。

https://app.dimensionkit.com/admin から管理画面を開く
対象スコアカードの編集画面を開き、Embed タブを選択
Embed スイッチをオンにする
埋め込みを許可するオリジン（ドメイン）を登録する
生成されたコードスニペットをコピーする

公開中（published）のスコアカードのみ埋め込み可能です。下書き状態の場合は 404 が返されます。

許可オリジン（Allowed origins）

オリジンとは、スキーム（http/https）、ホスト、ポートで構成される単位です。下層パスやURLを含めないでください：

https://example.com
https://www.example.com
http://localhost:3000

https://example.com と https://www.example.com は別のオリジンとして扱われます。両方で提供しているサイトの場合は両方を登録してください。

ローダースクリプトは実行中のページ情報をサーバーへ通知します。そのオリジンが登録一覧に存在しない場合、iframeは 403 を返します。これはサーバー側の Content-Security-Policy: frame-ancestors ヘッダーによって強制されるため、万が一スニペットが第三者のサイトにコピーされても不正利用を防げます。

コードスニペット

<div id="scorecard"></div>
<script
  src="https://app.dimensionkit.com/embed.js"
  data-dk-scorecard="your-scorecard-slug"
  data-dk-target="#scorecard"
></script>

属性	必須	概要
`data-dk-scorecard`	必須	スコアカードのスラッグ
`data-dk-target`	必須	マウント先要素のCSSセレクター
`data-dk-min-height`	任意	初期表示時の高さ（px）
`data-dk-title`	任意	iframeのアクセシビリティ用タイトル

JavaScriptから動的に埋め込む場合

SPAやCMSなどで動的に初期化したい場合は、ローダー関数を直接実行できます：

<div id="scorecard"></div>
<script src="https://app.dimensionkit.com/embed.js"></script>
<script>
  window.DimensionKit.embed({
    target: '#scorecard',
    scorecard: 'your-scorecard-slug',
    minHeight: 640,
    title: 'スコアカード',
  });
</script>

イベントの監視

埋め込み要素はターゲット要素上でカスタムイベントを発火します。アナリティクス連携や完了時のコンテンツ表示に利用できます：

document.querySelector('#scorecard')
  .addEventListener('dimensionkit:completed', () => {
    // 回答者が結果画面に到達したときの処理
  });

イベント名	発火タイミング
`dimensionkit:loaded`	スコアカードが読み込まれ準備完了したとき
`dimensionkit:resize`	コンテンツの高さが変化し、iframeがリサイズされたとき
`dimensionkit:completed`	回答者が結果画面に到達したとき
`dimensionkit:error`	読み込み失敗または回答送信に失敗したとき

親ウィンドウに対して postMessage でも同一イベントが通知されます。

トラブルシューティング

スコアカードが表示されず空白になる。 ほぼオリジン設定の問題です。ブラウザの開発者コンソールを確認してください。403 の場合は、アクセス元オリジンが許可リストに登録されていません。www. の有無や http / https の違いを確認してください。

404 が表示される。 スラッグが間違っているか、下書き状態のままであるか、管理画面で埋め込みが有効化されていません。

読み込まれるが高低のリサイズが機能しない。 サイト側の親要素で高さが固定されている可能性があります。親コンテナに固定の height や overflow: hidden が設定されていないか確認してください。