外部サイトへの埋め込み

ライトプラン以上では、Swippy で作成した LP を自社サイトの中に埋め込んで表示できます。スクリプトタグを 1 行貼るだけで、レスポンシブ対応の LP がそのまま表示されます。

埋め込み機能の利用にはライトプラン以上が必要です

フリープランでは埋め込み機能を利用できません。利用するにはライト以上にアップグレードしてください。

どんなときに使うか#

埋め込み機能は、次のような場面で活用できます。

既存のコーポレートサイトの中に、特定キャンペーンの LP を埋め込む
ブログ記事の中で、商品紹介をスワイプ型 UI で表示する
独自に運用しているサイトの会員ページに、限定キャンペーンを表示する
WordPress の固定ページに直接 Swippy LP を組み込む

埋め込みの仕様#

項目	仕様
埋め込み方式	JavaScript スクリプトタグ 1 行
埋め込み先ドメイン	1 プロジェクトにつき 1 つまで設定可能
表示サイズ	縦横比 9 : 16(スマートフォン縦画面)を維持
高さ	自動算出(コンテナ幅の 16 / 9 倍、最大 844 ピクセル)
HTTPS	必須(埋め込み先サイトも HTTPS が必要)

iframe タグの直接記述は対応していません

Swippy の埋め込みは JavaScript スクリプトタグの 1 種類のみに対応しています。iframe タグを直接ソースから取得して貼り付ける方法は提供していません。

設定の全体の流れ#

プロジェクト設定で埋め込み先ドメインを登録する
どのサイトに埋め込むかを Swippy 側で指定します。
LP 設定タブで埋め込みコードをコピーする
Swippy が生成するスクリプトタグをコピーします。
自社サイトに貼り付ける
HTML の埋め込みたい位置にスクリプトタグを貼り付けます。

所要時間は 5 分程度です。

ステップ 1: 埋め込み先ドメインを登録する#

プロジェクト設定画面の 「埋め込み設定」 セクションで、埋め込み先のドメインを入力します。

入力するドメインの形式

入力するのは「ドメイン名」のみです。プロトコル(https://)やパス(/page)は含めないでください。

正しい例: example.com / shop.example.jp / lp.beautysalon.co.jp
誤った例: https://example.com / example.com/page / https://shop.example.jp/

入力して 「保存」 を押すと、登録が完了します。

1 プロジェクト = 1 ドメインの理由#

複数のサイトに埋め込みたい場合は、サイトごとに別のプロジェクトを作成してください。1 プロジェクトに複数のドメインを登録することはできません。

これは Swippy の運用方針として、プロジェクト単位での管理の明快さを優先しているためです。

ステップ 2: 埋め込みコードをコピーする#

LP 設定タブの 「埋め込みコード」 セクションから、スクリプトタグをコピーします。

表示されるコードの例は次のとおりです。

<script src="https://app.swippy.jp/e.js"
  data-lp="550e8400-e29b-41d4-a716-446655440000"></script>

data-lp 属性の値は、LP を識別する固有の ID です。LP ごとに異なる値が割り当てられます。

プロジェクトに埋め込み先ドメインが未設定のとき

プロジェクト設定で埋め込み先ドメインが未設定の場合、LP 設定タブの埋め込みコードは表示されず、代わりにプロジェクト設定への誘導が表示されます。先にステップ 1 を完了してください。

ステップ 3: 自社サイトに貼り付ける#

コピーしたスクリプトタグを、自社サイトの HTML の埋め込みたい位置に貼り付けます。

<!DOCTYPE html>
<html>
<head>
  <title>夏キャンペーン特設ページ</title>
</head>
<body>
  <h1>夏のスペシャルキャンペーン</h1>
  <p>こちらのキャンペーンは期間限定でお届けします。</p>

  <!-- ここに Swippy の埋め込みコードを貼り付け -->
  <script src="https://app.swippy.jp/e.js"
    data-lp="550e8400-e29b-41d4-a716-446655440000"></script>

  <p>お問い合わせは下記までお願いします。</p>
</body>
</html>

スクリプトタグが読み込まれると、その位置に LP が iframe として自動的に挿入されます。

WordPress に埋め込む場合#

WordPress の固定ページや投稿に埋め込む場合は、次のいずれかの方法でスクリプトタグを貼り付けてください。

ブロックエディタ(Gutenberg): 「カスタム HTML」ブロックを追加し、埋め込みコードを貼り付ける
クラシックエディタ: 編集画面を「テキスト」モードに切り替えて、埋め込みコードを貼り付ける

LP のデザインは WordPress テーマの影響を受けません

Swippy の埋め込みは内部で iframe を生成するため、LP の中身(画像・テキスト・スワイプ動作・配色など)は WordPress テーマの CSS や JavaScript から完全に隔離されています。

ただし、iframe を 配置する位置と幅 は、利用中の WordPress テーマのコンテンツ幅やマージンの影響を受けます。テーマのコンテンツ領域が狭い場合、埋め込まれた LP も同じ幅で表示されます。

表示サイズの調整#

埋め込まれた LP は、配置されたコンテナの幅に応じて自動的にサイズが調整されます(縦横比 9 : 16 を維持)。表示幅を独立して制御したい場合は、スクリプトタグを <div> で囲んで CSS でサイズを指定してください。

<div style="max-width: 400px; margin: 0 auto;">
  <script src="https://app.swippy.jp/e.js"
    data-lp="550e8400-e29b-41d4-a716-446655440000"></script>
</div>

WordPress でテーマのコンテンツ幅に左右されずに表示させたい場合も、上記の <div> で囲む方法が有効です。

不正な埋め込みからの保護#

Swippy はプロジェクト設定で登録した埋め込み先ドメインのみで LP が正しく表示されるように、2 段階の保護機能を備えています。

第 1 層: 不正ドメインで Swippy 誘導メッセージを表示#

許可されていないドメインに埋め込みコードがコピーされた場合、LP の代わりに次のような誘導メッセージが表示されます。

このコンテンツは許可されていないサイトに埋め込まれています
スワイプ LP を作成するなら → Swippy で無料作成

第 2 層: ブラウザレベルでの表示拒否#

万一、第 1 層を回避して iframe URL が直接貼り付けられた場合でも、ブラウザのセキュリティ機能(CSP frame-ancestors)によって表示自体がブロックされます。

これにより、埋め込み先ドメインを登録していないサイトに LP が無断で埋め込まれることを構造的に防ぎます。

分析データの扱い#

埋め込み経由のアクセスは、サブドメイン・独自ドメイン経由のアクセスとまとめてカウントされます。

ダッシュボードの PV 数には、埋め込み経由のアクセスも含まれる
月間 PV の上限カウントにも、埋め込み経由のアクセスが含まれる
どこから来たアクセスかを区別したい場合は、UTM パラメータを使った識別を推奨

→ アクセス分析の見方

うまくいかないとき#

LP が表示されない・空白になる#

次の点を確認してください。

プロジェクト設定で埋め込み先ドメインが正しく登録されているか
登録したドメインと、実際に埋め込んでいるサイトのドメインが一致しているか(プロトコル不要)
埋め込み先サイトが HTTPS で配信されているか
ブラウザの開発者ツール(コンソール)にエラーメッセージが表示されていないか

別のサイトでも表示させたい#

Swippy では 1 プロジェクトにつき 1 つの埋め込み先ドメインのみ登録可能です。複数サイトで使いたい場合は、サイトごとに別のプロジェクトを作成し、それぞれに埋め込み先ドメインを登録してください。

サイズが思った通りに表示されない#

埋め込みコードは縦横比 9 : 16(縦長)で表示されます。横長のレイアウトに変更することはできません。

表示サイズを制御したい場合は、スクリプトタグを <div> で囲んで CSS の max-width などでサイズを指定してください。WordPress などの CMS でテーマのコンテンツ幅の影響を避けたい場合も同じ方法が有効です。

次のステップ#

LP のアクセス分析を確認するには、次のページを参照してください。

→ アクセス分析の見方