ポップリンクの表示レイアウトを変更する〜ポップリンク カスタマイズ〜

Tweet

ポップリンクの表示をカスタマイズ

今回は、画像付き検索アシストポップリンクのカスタマイズについてご紹介します。
ポップリンクは、Webページに埋め込むポップリンクのパラメータの設定によって、様々なカスタマイズができます。

ポップリンクタグの基本構造

下記は、もっとも基本的なポップリンクのscriptタグです。ポップリンクのご利用開始時にお知らせしているものとほぼ同じものです。

  <script>
    var poplink3 = {
      uid: "f7ca52f2c20a75622a642cb4a5386917m",
      target: "#keyword",
      deviceType: "pc022"
    };
    (function() {
      // 中略
    })();
  </script>

この var poplink3 = { … } の部分を、ポップリンクでは「タグパラメータ」と呼びます。
このパラメータを書き換えたり、追加することとで、ポップリンクの動作を変えることができます。

候補語と商品情報の表示位置を変更

デバイスタイプを変更してみる

デバイスタイプとは、表示されるポップリンクのレイアウトの種類のことです。デスクトップ用、モバイル用に複数種類のデバイスタイプを提供しています。（各デバイスタイプについて詳しくは、ご契約時にご案内しているサービス仕様書のテクニカルリファレンスをご覧ください。）

上記の例では、デバイスタイプ”pc022″が指定されていますが、このデバイスタイプはデスクトップ用のもので、左側に候補語のリスト、右側に商品情報が表示されます。

これを、縦方向に表示する”pc011″に変更してみます。
タグパラメータを次のように変更してみましょう。

    var poplink3 = {
      uid: "f7ca52f2c20a75622a642cb4a5386917m",
      target: "#keyword",
      deviceType: "pc011"
    };

ポップリンクを埋め込んだWebページを、ブラウザで表示してみてください。候補語リストと商品情報が縦方向に並んで表示されるようになるはずです。
※すでに表示済みであれば、リロードしてください。
※表示が変わらない場合はブラウザのキャッシュをクリアしてください。

このほかにも、ポップリンクではWebサイトのイメージや画面構成に応じた表示のカスタマイズが可能です。ぜひ、自社サイトに合ったカスタマイズを試してみてください。
（カスタマイズについて詳しくは、ご契約時にご案内しているサービス仕様書のテクニカルリファレンスをご覧ください。）

今回は、ポップリンクのカスタマイズの基本についてご紹介しました。

関連サービス

画像付き検索アシスト「ポップリンク」