メインコンテンツにスキップ

動的スクリプト埋め込み:JavaScriptでの設定方法

ト
対応者:トライハッチCS

①動的スクリプト埋め込み: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に関する個別の設定方法につきましては、ご案内いたしかねますので、あらかじめご了承ください。

こちらの回答で解決しましたか?