①動的スクリプト埋め込み:JavaScriptとは
専用のJavaScriptタグを設置することで、指定した場所へスワイプツールのコンテンツを動的に表示する埋め込み方式です。
表示位置は、HTML内のIDやクラス名などの指定によって設定できます。
■特徴
iFrameのように独立した枠の中へ表示するのではなく、ページ内の指定した位置へコンテンツを直接表示します。
そのため、ページの構成に合わせて柔軟に配置でき、既存サイトとの親和性が高いことが特徴です。
■メリット
ページデザインやレイアウトになじみやすい
自然な形でコンテンツを組み込める
広告計測やアクセス解析との相性が良い
表示速度や操作性を維持しやすい
表示位置を柔軟に調整できる
■こんな場合におすすめ
Meta広告やGoogle広告などの計測を正確に行いたい場合
WordPressサイトやランディングページへ組み込みたい場合
表示速度やユーザー体験を重視したい場合
既存サイトのデザインに自然に組み込みたい場合
■JavaScript埋め込みが不向きな場合
JavaScriptの実行や読み込みが制限されているサーバー環境
企業サイトや官公庁サイトなど、厳しいセキュリティポリシーが適用されている環境
WordPressのテーマやプラグインによってJavaScriptが無効化・削除される可能性がある環境
トラブル発生時にHTMLやJavaScriptの調整が難しい運用体制
■ご注意事項
公開先サイトの構成やセキュリティ設定によっては、JavaScriptが正常に動作しない場合があります。
導入前に、ご利用中のサーバーやCMSで外部JavaScriptの利用が可能かご確認ください。
②JavaScriptの設定方法(ロリポップFTPの場合)
① 表示用の受け皿を作成する
JavaScript方式で公開タグを利用する場合は、LPを表示するための「受け皿(表示領域)」を事前にページ内へ設置する必要があります。
JavaScriptタグは、指定された受け皿へスワイプツールで作成したLPを読み込んで表示する仕組みのため、受け皿が設置されていない場合は正常に表示されません。
受け皿のコード例
<!-- SwipeTool 表示位置(受け皿) --> <div id="swipeTool-container"></div>
② JavaScriptタグを設置する
スワイプツールの管理画面で取得したJavaScriptタグを、HTMLのbodyタグ終了直前(の直前)へ貼り付けて保存してください。
保存後、ブラウザでページを再読み込みし、正常に表示されていることをご確認ください。
■補足
基本的には、受け皿とJavaScriptタグを設置するだけで、スワイプツールで作成したLPを表示することができます。
ただし、公開先サイトの構成やデザインによっては、表示位置や画面サイズの調整が必要となる場合があります。
その際は、ご利用環境に応じてHTMLやCSSの調整を行ってください。
■ご注意事項
公開先サイトの構成やサーバー環境によって必要な設定は異なります。
サイト側のHTML・CSS・JavaScriptに関する個別の設定方法につきましては、ご案内いたしかねますので、あらかじめご了承ください。
③JavaScriptの設定方法(WordPressの場合)
① WordPressの管理画面へログインし、「固定ページ」から新規ページを作成します。
② ブロック追加画面から「カスタムHTML」ブロックを2つ設置します。
【1つ目のブロック】
表示用の受け皿を設置します。
受け皿のコード例
<div id="swipeTool-container"></div>
【2つ目のブロック】
ページ下部(末尾)に、スワイプツールの管理画面で取得したJavaScript公開タグ(scriptタグ)を設置します。
③ ページを公開します。
以上で、スワイプツールで作成したLPをWordPress上に表示することができます。
■ご注意事項
ご利用中のWordPressテーマによっては、ヘッダー・フッター・サイドバーなどの影響により、表示領域が狭くなったり、一部のコンテンツが見切れたりする場合があります。その際は、テーマ設定やページレイアウトを適宜調整してください。
WordPressのテーマやプラグインの仕様によっては、scriptタグが自動的に削除または無効化される場合があります。
公開後は必ずプレビュー画面または公開ページを確認し、scriptタグが正常に反映されていることをご確認ください。
公開先サイトのHTML・CSS・JavaScriptに関する個別の設定方法につきましては、ご案内いたしかねますので、あらかじめご了承ください。


