モーダルオプションを利用する

©ノアドット株式会社

高橋 理恵

森勇人

岡田 英雅

高橋 理恵

ノアドット株式会社

東芝でSIerを3年経験し、2005年にヤフー入社。法人向けサービスの営業、Yahoo!ニュースのビジネス開発の業務を担当。ノアドット事業の立ち上げに関わり設立とともに出向し、2017年秋にノアドットに転職。現在は主にインサイドセールス、カスタマーサポートの業務を担当。クアラルンプール在住。

高橋 理恵の記事一覧を見る

森勇人

ノアドット株式会社

IDGジャパンでコンピュータ雑誌の編集者を経て、2004年にヤフー入社。ヤフーでは編成部門のち、企画部門にて「R25」「X BRAND」のサービス責任者を務める。その傍らnor.事業の立ち上げにも関わり、ジーニー社を経てノアドット社にジョイン。広告業務を中心に売上全般の管理を行っている。

森勇人の記事一覧を見る

岡田 英雅

ノアドット株式会社

ソフトバンクグループでオンラインメディアの企画広告営業、メディアコンサル会社立ち上げ、ハフポスト日本版の広告セールス部門立ち上げ(CEO付事業統括補佐)などを経て、2017年4月よりノアドットにジョイン。

岡田 英雅の記事一覧を見る

「モーダルオプション」機能を使うと、自サイトを訪問したユーザーがサイトから離脱することを防げます。

nor.の通常の利用方法では、キュレーターはthis.kiji.isドメインから配信されている記事ページにリンクを張ることになります。アプリ内ブラウザであればアプリ内にとどめ続けることができますが、汎用ウェブブラウザ上では、画面遷移させても、別タブや別ウィンドウで記事ページを開かせても、自サイトからユーザーが離脱します。

モーダルオプションは、画面遷移を発生させず、自サイトのページを表示したままモーダルウィンドウで記事ページを表示する機能です。

上図のように、読者が右上の「×」ボタンを押すことでモーダルウィンドウが閉じ、自サイトにユーザーが戻ります。記事ページは通常モデルと変わらずthis.kiji.isドメインから配信されるので、記事ページで発生した広告収益の分配も通常モデルと同様に行われます。

モーダルオプションの実装は、以下の3つの作業のみで完了します。

1. ads.txtを更新する

まず最初に、自身のウェブサーバーに置く「ads.txt」(ads.txtについてはこちら)に以下の追記を行います。

google.com, pub-4307535858110282, DIRECT, f08c47fec0942fa0
google.com, pub-5897179876377792, RESELLER, f08c47fec0942fa0

これを行わないと広告が正しく配信されず、nor.のネットワークに影響を与えるおそれがありますので必ず記述してください。

モーダルオプションを実装していながらads.txtへの上記の記述が正しく行われていないキュレーター・ユニットについては、そのユニットへの収益分配の停止やそのユニットを保有するパブリッシャーの契約解除などを行う可能性があります。

2. HTMLの<a>タグ内でclassを指定する

次に、HTMLの<a>タグ内への追記を行います。

これまでは、「123」というIDの記事にリンクを張るとき、キュレーター還元を受け取る場合は以下のように「?c=」のあとにキュレーター・ユニッ トのID(以下例では「456」を付与していただくだけでした。

<a href="https://this.kiji.is/123?c=456">続きを読む</a>

モーダルオプションを使う場合は、<a>タグ内で以下のようにclass指定しておきます。

<a href="https://this.kiji.is/123?c=456" class="nordot-modal">続きを読む</a>
3. HTMLに<script>タグを1行追加する

最後に、以下の<script>タグを、HTMLの<body>タグ内に追記します。(DOM構築前の実行を避けるため、<body>タグ内の最終行への追記を推奨しています)

<script src="https://this.kiji.is/modal/modal-1.0.0.min.js"></script>

これで、モーダルオプションの実装は完了です。

ウィジェット併用時の注意

モーダルオプションを設定しているのと同一HTML内に[ウィジェット](も一つ以上設置していて、そのいずれかのウィジェットの「data-target」属性の値に「_modal」を指定することで記事がモーダルウィンドウで開くようにしている場合、こちらのモーダルオプション機能の設定のほうでは上記「3. HTMLにタグを1行追加する」を行わないようにしてください。

以下も参考にしてください。

【A】モーダルオプションだけを使う場合
上記「3. HTMLにタグを1行追加する」を行う。

【B】ウィジェットだけを使う場合
「[ウィジェットを利用する](」ガイド記事記載のタグを記述する。

【C】ウィジェットだけを使い、表示した記事をモーダルウィンドウで開く場合
「[ウィジェットを利用する](」ガイド記事記載のタグを記述し、「data-target」属性の値に「_modal」を指定する。

【D】モーダルオプションとウィジェットを併用し、ウィジェットで表示した記事はモーダルウィンドウで開かない場合

  • 上記「3. HTMLにタグを1行追加する」を行う。
  • 「[ウィジェットを利用する](」ガイド記事記載のタグを記述し、「data-target」属性の値に「_modal」以外を指定する。

【E】モーダルオプションとウィジェットを併用し、ウィジェットで表示した記事もモーダルウィンドウで開く場合

  • 上記「3. HTMLにタグを1行追加する」を行わない
  • 「[ウィジェットを利用する](」ガイド記事記載のタグを記述し、「data-target」属性の値に「_modal」を指定する。
独自にモーダル表示を実装される場合の注意

他のライブラリ等を使って独自にiframeによる記事ページの表示を実装する場合、見た目や挙動が本機能と同一である(モーダルウィンドウ内でiframe表示すること、親ウィンドウ側にシャドウをかけること等を含みます)と見なせないと、キュレーター収益の分配対象とならない場合やアカウント停止に至る場合がありますので、ご注意ください。