配信ターゲットの設定
      ホームに戻る
      1. Flipdeskサポートセンター
      2. Flipdeskマニュアル
      3. 配信ターゲットの設定

      ページ内要素(DOM要素)

      Flipdeskにおける【ページ内要素(DOM要素)】条件について説明します。

      ページ内要素(DOM要素)とは

      ページ内の特定のDOM要素を指定して、ターゲティングを行える条件です。

      例えば、カートアイコンのバッジが「1」以上の時に接客を行いたい場合、【ページ内要素(DOM要素)】条件でバッジの要素を指定して、ターゲティングすることが可能です。

      例）カートアイコンのバッジ要素が「id="cart-count"」の場合

      • 値の比較：強制数値モード
      • 条件設定：id="cart-count"のInnner HTMLが「1」以上

      HTMLの知識を要する条件です。

      条件の設定方法

      ページ内要素(DOM要素)

      1. まず「値の比較」から以下のどちらかを選択します。

      項目名 説明
      文字列モード

      指定した「文字列」が、HTML上でヒットするか否かを比較します。

      設定例

      • パンくずに「トップス」が含まれている
      • サイト内検索窓に「ギフト」が含まれている
      強制数値モード

      指定した「数値」が、HTMLでヒットするか否かを比較します。

      設定例

      • カートアイコンのバッジが「1」以上
      • ポイント保有数が「500」未満

      強制数値モードについて

      • 指定した要素の中から数値のみを忠実に判定するモードになるため、以下のような数値を取得したい場合はご注意ください。
        • 取得したい要素が「5,000-」のような記載の場合は、「5000」として判定しまするため、「以上」「未満」の指定が可能です。
        • 取得したい要素が「30個で30,000円」のような記載の場合は、「3030000」になるため、「30000」を軸とした「以上」「未満」の指定ができません。
      • 「-（ハイフン）」や「.（ピリオド）」が数値の頭に入る場合は、以下のようになります。
        • 例：flipdesk-123 → -123
        • 例：.123 → 0.123


      2. 次に「条件設定」でDOM要素を指定していきます。

      　詳細を設定していく設定の前に、各要素の名称をご案内いたします。

      DOM要素とは

       

      3. 「条件設定」では、まず指定する要素をプルダウンから選択します。
      　 入力欄には該当の名前を入力します。

      項目名 説明
      id

      ページ内に存在する要素のうち、idを対象に比較を行います。
      class

      ページ内に存在する要素のうち、classを対象に比較を行います。

      同じclass名であっても個別に比較が行われ、1つでも一致するものがあれば条件一致となります。
      タグ

      ページ内に存在するタグを対象に、比較を行います。

      同じタグであっても個別に比較が行われ、1つでも一致するものがあれば条件一致となります。

       

      4. プルダウンから以下のいずれかを選択して、条件の詳細を設定していきます。

      項目名 説明
      存在する 指定したid・class・タグのいずれかが、HTML上に存在する場合を判定基準にします。
      存在しない

      指定したid・class・タグのいずれかが、HTML上に存在しない場合を判定基準にします。
      属性

      指定したid・class・タグのいずれかの属性を対象に比較します。
      Innner HTML

      指定したid・class・タグ内のHTML文字列を対象に比較します。

      ブラウザに表示される文字列以外にも、ソースのHTML文字列全体にマッチさせることも可能です。

       

      5. 最後に、入力した値に対する条件設定を行います。

      項目名 説明
      部分一致する

      入力欄に記述した文字列とHTML上の文字列を比較して、一部でも一致していれば条件にマッチします。

      例）入力文字列：flipdesk

      マッチするケース

      <div class="sample">flipdesk</div>
      <div class="sample">flipdesk01</div>

      マッチしないケース

      <div class="sample">flip</div>
      <div class="sample">flip-desk01</div>
      完全一致する

      入力欄に記述した文字列とHTML上の文字列を比較して、完全に一致していれば条件にマッチします。

      例）入力文字列：flipdesk

      マッチするケース

      <div class="sample">flipdesk</div>

      マッチしないケース

      <div class="sample">これはflipdeskです</div>
      <div class="sample">flipdesk01</div>
      前方一致する

      入力欄に記述した文字列とHTML上の文字列を比較して、先頭からの文字列が一致してれば条件にマッチします。

      例）入力文字列：flipdesk

      マッチするケース

      <div class="sample">flipdesk</div>
      <div class="sample">flipdeskについて</div>

      マッチしないケース

      <div class="sample">Cross Talkとflipdesk</div>
      <div class="sample">これはflipdeskです</div>
      後方一致する

      入力欄に記述した文字列とHTML上の文字列を比較して、末尾からの文字列が一致していれば条件にマッチします。

      例）入力文字列：flipdesk

      マッチするケース

      <div class="sample">flipdesk</div>
      <div class="sample">Cross Talkとflipdesk</div>

      マッチしないケース

      <div class="sample">flipdeskについて</div>
      <div class="sample">これはflipdeskです</div>
      正規表現一致する

      入力欄に正規表現を使って記述した文字列とHTML上の文字列を比較して、正規表現の文字列と一致していれば条件にマッチします。

      例）入力文字列：flipdesk..*

      マッチするケース

      <div class="sample">flipdeskについて</div>

      マッチしないケース

      <div class="sample">flipdesk</div>

      例）入力文字列：..*flipdesk$

      マッチするケース

      <div class="sample">これがflipdesk</div>

      マッチしないケース

      <div class="sample">flipdeskについて</div>
      部分一致しない

      入力欄に記述した文字列とHTML上の文字列を比較して、一部でも一致していない場合、条件にマッチします。

      例）入力文字列：フリップデスク

      マッチするケース

      <div class="sample">flipdesk</div>
      <div class="sample">Cross Talk</div>

      マッチしないケース

      <div class="sample">フリップデスク</div>
      <div class="sample">flipdeskフリップデスク</div>
      前方一致しない  入力欄に記述した文字列とHTML上の文字列を比較して、先頭からの文字列が一致していない場合、条件にマッチします。

      例）入力文字列：flipdesk

      マッチするケース

      <div class="sample">Cross Talkとflipdesk</div>
      <div class="sample">これはflipdeskです</div>

      マッチしないケース

      <div class="sample">flipdesk</div>
      <div class="sample">flipdeskについて</div>
      後方一致しない

      入力欄に記述した文字列とHTML上の文字列を比較して、末尾からの文字列が一致していない場合、条件にマッチします。

      例）入力文字列：flipdesk

      マッチするケース

      <div class="sample">flipdeskについて</div>
      <div class="sample">これはflipdeskです</div>

      マッチしないケース

      <div class="sample">flipdesk</div>
      <div class="sample">Cross Talkとflipdesk</div>
      正規表現一致しない

      入力欄に正規表現を使って記述した文字列とHTML上の文字列を比較して、正規表現の文字列と一致していない場合、条件にマッチします。

      例）入力文字列：flipdesk..*

      マッチするケース

      <div class="sample">flipdesk</div>

      マッチしないケース

      <div class="sample">flipdeskについて</div>

      例）入力文字列：..*flipdesk$

      マッチするケース

      <div class="sample">flipdeskについて</div>

      マッチしないケース

      <div class="sample">これがflipdesk</div>
      完全一致しない

      入力欄に記述した文字列とHTML上の文字列を比較して、完全に一致していない場合、条件にマッチします。

      例）入力文字列：flipdesk

      マッチするケース

      <div class="sample">これはflipdeskです</div>
      <div class="sample">flipdesk01</div>

      マッチしないケース

      <div class="sample">flipdesk</div>
      以上

      強制数値モードを選択した場合に、ご利用いただけます。

      指定した要素内の数値が、入力した数値以上の値になる場合、条件にマッチします。
      未満

      強制数値モードを選択した場合に、ご利用いただけます。

      指定した要素内の数値が、入力した数値未満の値になる場合、条件にマッチします。
      の間

      強制数値モードを選択した場合に、ご利用いただけます。

      指定した要素内の数値が、入力した数値間に当てはまる場合、条件にマッチします。