HTML、CSS、JSコードを挿入できますか?
この記事では、 systeme.io で作成したページにHTML、CSS、JSコードを挿入する方法について説明します。
ここで必要なものは以下の通りです:
systeme.io アカウント
HTML、CSS、JSコード
ページにHTMLコードを追加することで、画像、テキスト、リンクなどのコンテンツにカスタムスタイル、機能、構造を追加することができます。
例えば :
スタイルをカスタマイズするには、 CSS コードを追加します。
ページや個々の要素にアニメーションを追加するには(例えば、ボタンにカーソルを合わせたり、クリックしたときなど)、 JS コードを追加します。
一般的なタイトルやテキストを追加したり、ページ上にテーブルやセクション、区分を作成するには、 HTML コードを追加します。
カスタムコードをヘッダーコード、フッターコード、トラッキングコード、または生のHTMLコードセクションに追加する場合は、以下のタグは含めないでください:
<head> </head>
<footer> </footer>
<html> </html>
<body> </body>
iframe を使用してビデオを追加する場合、余分なタグは必要ありません。
誤った例:
正しい例:
Facebookトラッキングコードを挿入するには、コードを配置したいページを含んでいるセールスファネルにアクセスして下さい。
左側のページリストからファネルページを選択し、 「ページを編集」 をクリックして下さい。
左上にある 「設定」 をクリックし、 「追跡」 (トラッキング)セクションまで下にスクロールしてください。

このセクションには、ページのタグとタグ内に必要なコードを貼り付けてください。

このセクションでは、「ドキュメント・オブジェクト・モデル」(DOM)用のコードを追加します。

正確なトラッキングを行うには、いくつかのコードを各ファネルページに追加する必要があります。
各ページにコードを貼り付ける作業を繰り返さなくても良いように、全てのファネルページに自動的にグローバルにコードを適用する事が出来ます。
全てのページに自動的にコードを適用するには、プロフィール画像に行き、 「設定」 をクリックし、左側の項目から 「セールスファネル」 をクリックして下さい。 「トラッキングコード」 テキストボックスにトラッキングコードを貼り付け、 「保存」 をクリックしてください。

ページのエディターを使って、任意のHTMLコードをページに直接挿入することも可能です。
「Raw HTML 」要素をページの好きな場所にドラッグして追加します。

小さな歯車を選択し、項目の設定を表示します。(画像の1番)
左側の画面に、HTMLコード統合用のセクションが表示されます。そこにコードを貼り付けます。(画像の2番)

HTMLコードをテキストボックスに追加し(画像の3番)、 「保存」 する(画像の4番)。

必ず変更を 保存 してください。
ここで必要なものは以下の通りです:
systeme.io アカウント
HTML、CSS、JSコード
なぜページにカスタムコードを追加するのですか?
ページにHTMLコードを追加することで、画像、テキスト、リンクなどのコンテンツにカスタムスタイル、機能、構造を追加することができます。
例えば :
スタイルをカスタマイズするには、 CSS コードを追加します。
ページや個々の要素にアニメーションを追加するには(例えば、ボタンにカーソルを合わせたり、クリックしたときなど)、 JS コードを追加します。
一般的なタイトルやテキストを追加したり、ページ上にテーブルやセクション、区分を作成するには、 HTML コードを追加します。
重要な注意事項:
カスタムコードをヘッダーコード、フッターコード、トラッキングコード、または生のHTMLコードセクションに追加する場合は、以下のタグは含めないでください:
<head> </head>
<footer> </footer>
<html> </html>
<body> </body>
iframe を使用してビデオを追加する場合、余分なタグは必要ありません。
誤った例:
<div>
<iframe src="あなたの動画へのリンク"></iframe>
</div>
正しい例:
<iframe src="あなたの動画へのリンク"></iframe>
1.「追跡(トラッキング)コード」セクションにコードを追加する:
Facebookトラッキングコードを挿入するには、コードを配置したいページを含んでいるセールスファネルにアクセスして下さい。
左側のページリストからファネルページを選択し、 「ページを編集」 をクリックして下さい。
左上にある 「設定」 をクリックし、 「追跡」 (トラッキング)セクションまで下にスクロールしてください。

1.1 ヘッダーコードセクションに挿入するコード
このセクションには、ページのタグとタグ内に必要なコードを貼り付けてください。

1.2 フッターコードセクションに挿入するコード
このセクションでは、「ドキュメント・オブジェクト・モデル」(DOM)用のコードを追加します。

2.セールスファネル設定からコードを追加する:
正確なトラッキングを行うには、いくつかのコードを各ファネルページに追加する必要があります。
各ページにコードを貼り付ける作業を繰り返さなくても良いように、全てのファネルページに自動的にグローバルにコードを適用する事が出来ます。
全てのページに自動的にコードを適用するには、プロフィール画像に行き、 「設定」 をクリックし、左側の項目から 「セールスファネル」 をクリックして下さい。 「トラッキングコード」 テキストボックスにトラッキングコードを貼り付け、 「保存」 をクリックしてください。

3.ページに「HTMLコード」要素を追加する:
ページのエディターを使って、任意のHTMLコードをページに直接挿入することも可能です。
「Raw HTML 」要素をページの好きな場所にドラッグして追加します。

小さな歯車を選択し、項目の設定を表示します。(画像の1番)
左側の画面に、HTMLコード統合用のセクションが表示されます。そこにコードを貼り付けます。(画像の2番)

HTMLコードをテキストボックスに追加し(画像の3番)、 「保存」 する(画像の4番)。

必ず変更を 保存 してください。
更新日 31/05/2025
ありがとうございます