UX Rules

Owned by Daniel Kojokaro (Unlicensed)
Last updated: Aug 28, 2023 by Junki Osanai (Unlicensed)
2 min read

💡 UXルールは、Browsiエンジンがページ上で広告を配信するポリシーの制限を設定するのに役立ちます。広告と他の要素との距離を設定したり、要素に広告を挿入しないようにしたりと、制限の内容は様々です。

これらのルールは、Browsiエンジンによるダイナミックな配置に適用され、API要素には影響しませんのでご注意ください。

始める前に…

ルールを慎重かつ賢く最適化するためには、いくつかの基本を確認することが重要である。このセクションでは、以下について説明します：

ウェブサイトの構成(HTML)

HTML文書は、要素で構成されたプレーンテキスト文書です。要素は、一致する開始タグと終了タグで囲まれます。各タグは（<>）で始まり、（<>）で終わります。

Ex: <p>Hello, World </p>

要素は属性で拡張することができ、ブラウザがその要素をどのように解釈するかの追加情報を提供します。

Ex: <div id="first-paragraph" class="paragraph"><p>Hello, World</p></div>

HTML文書は3つの部分から構成されています：

  1. HTMLのバージョン情報を含む行、

  2. 宣言的ヘッダーセクション（<head>要素で区切られる）、

  3. 文書の実際の内容を含むボディ（<body>要素で区切られる）

コードを書く必要はありません。ウェブサイトがどのように構成されているか、基本的なことを少し説明するだけです。

ElementのIDとセレクタ

上述したように、要素は多くの属性を持つことができます。しかし、私たちが注目する主なものは、要素idとclassです。

id： id属性は、HTML要素に固有のidを指定します。(要素のid属性の値）。

<div id="first-paragraph"<p>Hello, World</p></div>

class： class属性は、スタイル・シート内のクラス名を指すのによく使われます。同じクラス名を持つ複数の要素のスタイルを操作するのによく使われます。

<div class="paragraph"<p>Hello, World</p></div>

 

 

規則用語

UXツール・ダッシュボードについて説明する前に、いくつかの用語について説明します：

Avoid > このコンテキストでは、 "Avoid "は、選択した要素の内側に広告を配置するBrowsiAIを制限します。

Stay Away > ここでいう”Stay Away”とは、選択された要素と配置された広告との間に、上から下へ最低限距離を設定することをBrowsiのAIに条件付けることです。”Stay Away”の距離を150ピクセルに設定することで、選択した要素の上下に150px以上の広告を配置するようにAIが設定します。

 

設定

UXルールは、Webサイトのデフォルト設定に加え、カスタムルールを追加することができます。これにより、お客様のニーズに合わせたより良い広告を最適化することができます。

ここでは、UXルールの最適化プロセスに関する詳細なガイドラインをご紹介します：

  1. アカウントにログインし、ダッシュボードの左側にあるUX Rulesを選択します。

2. DesktopかMobileを選択します。

システムにあらかじめ定義されているコンテンツタイプ（広告、画像＆動画、コンテンツ・レコメンデーション・ウィジェット）に基づいてルールを設定することができます。各セクションは、ルールを適用したい要素タイプを表します。

UXルールの設定を開始する：

  • セクションの種類にある"Edit"をクリックしてください。

  • 拡大したら、コンディションの種類を選択する： "Avoid" "または "Stay Away"。

  • "Avoid"タイプは、先ほど挿入した要素の内側にプッシュされる広告を無視する。

  • "Stay Away" タイプは、挿入した要素に基づいて広告を配置できる距離を設定します。densityのレベルはお好みで設定できます。

画面右側の"Preview - Ads"にある図を見れば、予想される結果が一目瞭然です。これは、あなたのコンテンツに配置されている広告の距離をスケーリングするのに役立ちます。

3. 展開されると、ルールに要素を追加するための2つのボタン（"Custom "と "+Create"）が表示されます。

[サイト] ドロップダウン - ルールを適用するサイトを選択できます。デフォルトは「すべてのサイト」で、パブリッシャーレベル（すべてのパブリッシャーのサイト）でルールが適用されます。

Sites drop down - where you can choose the sites you want to apply the rule on. Default selection is “All Sites”, means that the rule will be applied in publisher level (on all publisher’s sites).

ルールに要素を追加するための2つのボタン（"Custom "と "+Create"）。

 

4.技術的なバックグラウンドがない場合、UXルールに要素を追加するには+Createボタンが最適です：

  • Createボタンをクリックします。

  • 要素の種類を選択します。要素の種類は、<p>は段落、<li>はリスト項目、<div>は要素または要素コンテナの構文などの要素のリストです。ここをクリックすると、すべての要素タグとその定義を見ることができます。

  • 要素を正確に指定するために、どの属性がよりユニークかを選択します。class名が複数の要素をグループ化するのに対して、要素idは選択された要素にユニークな識別子を与えるために最もよく知られています。

  • "Custom"ボタンを選択し、要素のセレクタを挿入することもできます：

  • "Save"をクリックすると、要素がコンテナ内に保存され、適用されたルールが適用されます。

     

Custom Rules

画面右上の"Add Custom Rule"ボタンをクリックすれば、独自のカスタムルールを追加できます。

カスタムルールを追加することで、以下のことが可能になります：

  • Content Typeに名前を付ける

  • Rule Typeを設定する

  • ルールを適用するためのselectorを追加する

完了したら、"Save "ボタンをクリックすると、カスタムルールが作成されます。

 

 

必要なページ上のelements（要素）を見つける

UXルールの概要をつかんだところで、早速、適用したルールに追加する適切な要素をどこでどのように見つけるかについて考えてみます。

この目的のために、https://gobrowsi.com/case-study/futbol-sites-increases-its-ad-inventory-rpm-with-browsi-inventory-os/ を例にとって、エレメントの適切な選び方を紹介しよう。

  1. まずWebページを開きます。

  2. サイドバーの縦に並んだ3つの点をクリックすると、ドロップダウンが表示されます。

  3. More toolsからDeveloper tools。また、Mac OSではcommand+option+c、WindowsやLinuxではcontrol+shift+cというショートカットを使うこともできます。

4.要素ボックスがポップアップ表示され、必要に応じて変更することができます。開発ツールにはたくさんのタブがありますが、ここではサイトのすべての要素がある "Elements"パネルに集中します。

5.アイコンを使用すると、ページ上の要素をハイライトして選択することができます。また、 "Elements"パネルで要素にカーソルを合わせると、サイト要素がハイライトされ、何を選択しているのかわかりやすくなります。