タグマネージャーの選び方・使い方（Yahoo! タグマネージャー設定スクロール計測編）

ホームブログ 2018年3月1日

ブログ

BLOG

タグマネージャーの選び方・使い方（Yahoo! タグマネージャー設定スクロール計測編）

2018年3月1日
カテゴリ – 計測設定・タグ管理

みなさま、こんにちは。
グラッドキューブプロモーション事業部の柿木です。

過去3回のエントリにて、タグマネージャーを利用するメリットやデメリット、 Yahoo! タグマネージャー（以下： YTM ）でリンクに遷移する設定を施したボタンがクリックされた回数を計測する方法などをご紹介いたしました。
参考：タグマネージャーの選び方・使い方（概要編）
参考：タグマネージャーの選び方・使い方（ Yahoo! タグマネージャー設定編）
参考：タグマネージャーの選び方・使い方（Yahoo! タグマネージャー設定ボタンクリック計測編）

今回のエントリでは、各ページが一定量スクロールされた回数を計測する方法をご紹介いたします。

利用できるケース

今回ご紹介する方法は、 Google AdWords や Yahoo! プロモーション広告のアカウントにおいて、各ページが一定量スクロールされた回数を計測したいという場合に利用できます。

スクロール率は Google Analytics を利用することで計測が可能となりますが、プラグインを利用する必要があるため少々手間がかかります。

コンバージョンの計測を設定する際に、今回ご紹介する方法を実践いただければ、広告アカウントで簡単にスクロールされた回数を把握することが可能です。

なお、今回ご紹介する方法は、 jQuery （JavaScriptのライブラリ）を利用しているページでのみ利用可能な方法となりますので、予めご了承ください。

また今回は一例として、「ユーザーがページを75％スクロールした回数（10%、30%、50%も計測可能）」を計測する方法をご紹介いたします。

計測する手順

手順は（1）～（6）になります。

（1）ユニバーサルタグを発行する

（2）広告媒体のタグを発行する

（3）サービスタグを作成する

（4）ページを設定する

（5）スクリプトを設定する

（6）イベントバインディングを設定する

以下、（1）～（4）の簡単な流れと（5）（6）に関して詳述いたします。
（1）～（4）に関してはタグマネージャーの選び方・使い方（ Yahoo! タグマネージャー設定編）にてご紹介していますので、ご参考ください。

（1）～（4）の簡単な流れ

YTM でユニバーサルタグを発行して、ページにタグの設定を行います。

既にユニバーサルタグを発行している場合、新しく設定する必要はありません。
ユニバーサルタグの発行が完了したら、広告媒体のタグを設定します。

広告媒体のタグは「計測したいページ数」分のタグ発行が必要となります。
広告媒体のタグが発行できたら、 YTM でも同数分のサービスタグを発行し、サービスタグに計測対象のページを設定します。

ここまでは前回までにご紹介した内容とおよそ同様となります。

（5）スクリプトを設定する

YTM でページの設定が完了したら、ページにスクリプトを設定します。

「ウェブサイト」>「設定したページ」>「スクリプト管理」>「スクリプトの追加」を選択します。
スクリプト管理画面

以下のような画面となりますので、それぞれの項目にテキストを入力していきます。

■スクリプト名：scroll率

■スクリプトの説明：scroll率

■ライブラリーホスティング：内部（JavaScriptコードを入力）を選択

■javaScriptコード：

$(function(){
  $.each([0.1, 0.3, 0.5, 0.75], function(index, rate){
   var fn;$(window).on(“scroll”, fn = function(){
      var scroll_rate;
      scroll_rate = ($(window).scrollTop() + $(window).height()) / $(“body”).height();
       if (scroll_rate > rate) {
        $(window).trigger(“scrolled_by_” + rate * 100);
        $(window).off(“scroll”, fn);
      }
    });
  });
});

スクリプトの追加画面