【Google+の新機能「Content recommendations」を使ってモバイルサイトにおすすめコンテンツを表示】WordPressに入れました

Google＋ このページをあとで読む

2016/05/22追記

「Content recommendations」のサービスの提供が終わった？のか、リンク先が見つからず、今は使うことができないです。が、「以前こういうのもあったよ」というメモとして以下の内容は掲載し続けます。

Google+の新機能で「モバイルサイトにおすすめコンテンツを表示する方法がある」ということで、早速ためしました。画像の感じですと、下部に表示されるんですね。で、クリックすると詳細が見える、みたいな。

早速、設置しましょう～。

モバイルおすすめコンテンツの設置

「Enable mobile recommendations」にすべて方法が書いてあります。英文です。

  1. Edit your Google+ Page and ensure that you have a website listed in the website field for the Google+ Page profile.
  2. Open the Google+ dashboard.
  3. For the Google+ Page that you want to connect, click More>For your site.
  4. On the For your site tab, click One time setup in the top right. If you previously clicked this button, the button will instead show as Get setup code.
  5. In the dialog that displays, you will get two HTML code snippets that are preconfigured for this Google+ Page: a link element and a script element.
  6. Add the HTML to all of the pages that will use the recommendations bar. If you skip the previous steps, you can get the numeric {{PAGE_ID}} from the Google+ Page URL.

・・・おおよその手順は上の様な感じです。英文読んで理解するのってほんと難しいですね。というわけで、なんとか和訳して、理解して、端折って、以下に大体の流れを書きましたので、ご参考くださいませ～。

Google+ページを選んでダッシュボードを開く

まず、Google+ダッシュボードを開いて、今回おすすめコンテンツとして連携させたいGoogle+ページを選びましょう。私は、ブログの更新情報を投稿しているGoogle+ページにしました。

おすすめのコンテンツを表示させたいサイトやブログを選定する

次に、どのサイトに表示させるかを考えます。私は、このブログ（WordPressで作られています）に設置しました。

ヘッダーにPublisherのコードを入れる

それでは早速ですが、表示したいサイトの<head></head>タグ内に、下記のコードを入れます。

<link href="https://plus.google.com/103773364658434530979" rel="publisher" />

「103773364658434530979」は、私のGoogle+ページのIDですので、これは管理されているGoogle+ページのIDにあわせましょう。

ヘッダーにおすすめ表示用のコードを入れる

Google+ダッシュボードを開いて、Google+ページを選んで「もっと」をクリックして、下の画像のように、「サイト向け」をクリックします。

画面が切り替わります。下のように、「サイト向け」のリンクがこのたび追加されたようですね。

というわけで、下の画像にある「1回限りの設定」をクリックします。

下のように、モバイルサイトにコードを入れてください、と表示されます。

コード導入について、英文で書かれていますね。

Add this code anywhere on your webpage. We recommend the <head> section. Remove any existing script tags for the Google+ JavaScript API (plusone.js).

上の英文を訳すと、

表示されてるコードをWebサイトに入れてね。コードは、ヘッダータグ（<head></head>）内に入れるのがおすすめですよ。それで、Google+ JavaScript API (plusone.js)で配布されていたコードが存在する場合は、取り除いてこのコードを使ってくださいね。

ってだいたい書いてあると思います。それでは、下のコードをモバイル表示用の<head></head>タグの中に書きます。（下の太字部分は、お持ちのGoogle+ページによって違うと思います）先ほど、Publisherのコードを入れた箇所があったと思うんですが、その後に続いて書くと、後で「あ～、ここにまとめてたな。モバイルおすすめ用のコード書いてたわ～」って思い出すことができるので、よいです。

<script type="text/javascript">
  (function() {
    var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
    po.src = "https://apis.google.com/js/plusone.js?publisherid=103773364658434530979";
    var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

もう一度書きますが、私はこれまで＋１ボタンを設置する際にGoogle+ JavaScript API (plusone.js)で配布されているコードを使っていましたので、それは破棄して、Google+ページのIDが付いたコード（上のコードのことですね）を使います。

コードを設置したら、完了をクリックします。すると、下の画面に切り替わります。モバイルのおすすめを有効にすると、URL（ページ）ごとに表示・非表示や、表示するタイミングも設定できるようですね。これは、後から試してみます。

以上が設定方法ですが、もっとまとめると、

  • 表示させたいGoogle+ページを選んで、「モバイルのおすすめ」を有効にする。
  • 「モバイルのおすすめ」を表示させたいサイトを選定する。
  • 表示させたいサイトのヘッダー部分「<head>～</head>」に「Publisherのコード」と「モバイルのおすすめコード」を入れる（2つのコードは、近い箇所に入れてまとめて確認できるとよいですね）
  • ＋１やインタラクティブな投稿の時に使っていた古いコードは破棄しましょう

と、こんな感じです。

それでは実際に、どういう表示がされるのか確認しましょう～。

サンプル：設置に成功するとこうなります

私の持っている初代xperiaですと、表示できませんでした。Androidのバージョンによって表示されないんでしょうかね。下のキャプチャは、GoogleChromeのデベロッパーツールから、ユーザーエージェントを変更してPCからモバイル表示を確認しました。

上にスワイプ（スライド）させると表示されます。面白いですよねぇ。

タップすると、下のように表示されます。

私の記事をおすすめして頂いたGoogle+ユーザーが表示されていますね。

いいですねぇ～。

まとめ

「モバイルのおすすめ」とは何か

下のように、概要が書かれています。

Suggest personalized content from your website to mobile visitors. Keep users on your site longer, while guiding them to more of the content they came for.

Google翻訳を使って和訳したんですが、たぶん、

モバイルからサイトを閲覧してくれた方に対して、パーソナライズされたコンテンツを表示します。サイトの滞在時間も増えると思いますよ～

って書いてあるんだろうと思います。サイトを訪れてくれた方に「こういうのもおすすめですよ～」って仕組は、FacebookのRecommendations Barみたいなものですかね。それのGoogle版って感じですかね。まだ設置たばかりなので、しばらく様子を見守りたいと思います。

何かのご参考となりましたら、幸いです。

著者:bouya Imamura