詳細設定 - ロジックのカスタマイズ

ClickFunnels には、コンテナ (セクション、行、列、要素) の動作と機能を完全にパーソナライズするのに役立つ高度な設定が用意されています。これらの設定 により、コンテナの スタイル、アニメーション、 ロジックをより詳細に制御できます。この記事では、詳細設定内の [ロジック ] セクションに焦点を当て、レンダー条件とカスタム属性を適用してページのインタラクティブ性と機能を強化できます。

---

必要条件

• アクティブなClickFunnelsアカウント

• ワークスペースで作成されたページ

• エディターで追加されたセクション、行、列、または要素

---

レンダー条件

新しいレンダー条件の作成

レンダー条件を使用すると、要素の周囲にロジックを追加して、ページ上でレンダリングされる内容を制御できます。各レンダー条件は、いくつかの変数と論理演算子を使用できる新しい「if」条件を作成します。特定の変数を利用できるかどうかは、ページが使用されているサイトまたはテーマのどの部分によって異なります。

新しい レンダー条件ノードを作成するには、要素の設定の ロジック セクションから レンダー条件を追加 ボタンをクリックします。これにより、その要素があった場所に新しい レンダー条件ノードが作成され、その要素が “if” 条件内に自動的に配置されます。

レンダー条件の変更

要素のレンダー条件を作成すると、要素の設定のロジックセクションのボタンが、最も近い条件設定を訪問 に変わります。このボタンをクリックすると、要素が直接含まれている レンダー条件ノードの レンダー条件設定にアクセスできます。

それ以外の場合は、ページのレイアウトを表示して、すべてのレンダー条件ノードを見つけることができます。レンダー条件ノードをクリックして、その設定にアクセスします。

レンダー条件への要素の追加

レンダー条件ノード内の要素の下に新しい要素を追加する場合は、その要素を含む Condition ノード内に新しい要素を追加するか、Condition ノードの下に追加できます。Condition ノード内に要素を追加すると、その要素は内部の他の要素と同じロジックに従うことになります。それ以外の場合は影響を受けません。

既存の要素を 条件 ノードに追加する場合は、ページのレイアウトビューから追加できます。要素をリストから Condition ノード内の目的の場所にドラッグ アンド ドロップします。

レンダー条件を削除する

「レンダー条件の変更」セクションで説明されているように、レンダー条件設定にアクセスすると、 安全に条件ノードを削除 ボタンが表示されます。ボタンをクリックすると、条件のみを削除し、内部のすべての要素はそのままにします。

---

カスタム属性

ClickFunnels の カスタム属性 機能を使用すると、HTML 属性をコンテナ (セクション、行、列、Flex、要素) に直接追加でき、高度なカスタマイズ、動的機能、シームレスな統合が提供されます。カスタム属性を使用すると、ページのインタラクティブ性を強化したり、特定のスタイルを適用したり、ユーザーの行動を追跡したり、外部ツールがページと対話できるようにしたりすることもできます。

カスタム属性のしくみ

カスタム属性は、 名前 (例: data-custom) と 値 (例: example-value) で構成されます。これらの属性を追加すると、ページの HTML に含まれ、CSS を使用したスタイリング、JavaScript による動作の制御、またはサードパーティ ツールとの対話にアクセスできるようになります。

コンテナーへのカスタム属性の追加

1. コンテナ(セクション、行、列、フレックス、または要素)にカーソルを合わせ、歯車⚙️アイコンをクリックします。

2. [ 高度な ]オプションに移動します。

3. [ ロジック] メニューをクリックします。

4. 次に、「 カスタム属性を追加 」ボタンをクリックして、コンテナーのカスタム属性 名 と 値を 挿入します。
   

5. [ 保存] をクリックして、コンテナに属性を追加します。コンテナーに複数のカスタム属性を追加できます。

カスタム属性を使用したスタイル設定

コンテナのスタイルを設定するには、CSS でカスタム属性を参照します。たとえば、カスタム属性 data-highlight="button"を追加する場合、次のように CSS でターゲットにすることができます。

[data-highlight="button"] {
  background-color: #ff5722;
  color: #fff;
}

JavaScript インタラクションの有効化

カスタム属性を使用すると、JavaScript を使用してカスタム動作をトリガーできます。たとえば、次のようなカスタム属性を使用してインタラクションを追跡できますdata-track="cta-button"

document.querySelector('[data-track="cta-button"]').addEventListener('click', function() {
  console.log('CTA button clicked!');
});

カスタム属性の使用例

1. 正確な分析追跡

   • ボタンやリンクに data-track="subscribe-now" などのカスタム属性を追加して、分析ツールで詳細な追跡を可能にします。これにより、ユーザーエンゲージメントをより効果的に測定できます。

2. ダイナミックスタイリング

   • 属性を使用して、コンテナーの条件付きスタイルを作成します。たとえば、セクションに data-theme="dark" を追加して、特定のスタイルを適用できます。

     [data-theme="dark"] {
       background-color: #222;
       color: #fff;
     }

3. サードパーティツールの統合

   • 多くの外部ツールが機能するには、特定の HTML 属性が必要です。たとえば、チャットボット統合では、特定のコンテナに data-bot="live-support" 属性が必要になる場合があります。