【GTM - Tag】History Listener(ヒストリーリスナー) ~ Marketing Sphere

2014年3月頃にリリースされたHistory ListenerはHTML5で導入されたURL操作系APIのpushStateとpopStateを対象にしたもので、これ自体はページ自体はAjaxでよく利用されているものです。

具体的にはGitHubで使われているもので、コンテンツ自体はAjaxなのでページがロードされることはないのですが、コンテンツが変更され、かつURLが変わるというものです。

従って、Ajaxであるにもかかわらずブラウザの「戻る」「進む」が利用出来るようになり、かつハッシュなしのURLになるためSEO面でも通常のウェブサイトと同じ効果が得られるというものです。

通常Ajaxを利用したウェブサイトはGoogleのbot等がクローリングできない、またはクロールできてもページとして完成されたものがサーバから返されないことに寄ってIndexされることはありません。

Googleでは_escaped_fragmentなどの代替手段を提示してはいますが。

※本コンテンツは若干認識がズレている場合があります・・・

まずは事前にHistory Listenerのタグを用意しておきます。

発火条件はテスト環境なので全てのページで発火するようにしています。

次にトリガーですが、以下の4つの方法があります。

まず一つ目のwindow.history.pushState()はAjaxのページですが、ブラウザの戻るボタンや進むボタンで戻ったり進んだりできるようにするもので、通常ページコンテンツ、タイトル、URLを渡します。

window.history.replaceState()はpushStateとほぼ同じ動きですが、新規にヒストリは残さず置き換えるものです。

popstateは「戻る」ボタンや「進む」ボタンを利用して履歴を移動した場合に発生するイベントです。

ちなみにこのあたりの動きはブラウザによってもかなり仕様が異なっているようですので、実際の実装に際してはブラウザの仕様確認は必須となります。

今回はこちらのページからhistory APIに関するサンプルファイルをダウンロードしたので、こちらを利用してGoogle Tag Managerの動きを確認します。

まず、gtm.historyChangeでどのようなstateオブジェクトが入ってくるのかChromeのDevツールで確認してみます。

HOMEからAboutへページ移動したときのgtmデータです。

gtm.newHistoryState.titeが"Home Page"から"About"へ変更されています。

また、gtm.historyChangeSourceに"pushState"値が入ってきています。

ブラウザの戻るボタンをおすとgtm.historyChageSoureに「popstate」が入ってきます。

F5でページを更新した場合など、replaceStateが走った場合の例がこんな感じです。

ある程度予約されているdataLayerが分かったところで、次にGoogle Tag Managerの設定に戻ります。

今回も確認のためにGoogle Analyticsのイベント側でデータを受けますが、ページの単純なリロードやreplaceStatementは除外して、pushStateとpopstateのみを検知させてみます。

まずマクロでgtm.historyChangeSourceの値をdataLayerとして格納します。
※今はマクロの「Auto-Event Variable」の中にVariable Typeとして「History Change Source」というものが用意されていました。

次に発火条件としては、gtm.historyChangeが発生して、かつpopstateまたはpushStateの値が入ってきた場合のみ。

イベントは簡単な固定値でhistorychangeと入れておきました。

で、完成。

この辺になってくると、Ajaxやらブラウザの動き、HTML5のAPIや正規表現、デバッグツールや開発ツールを色々と使いながら検証する必要がありますね。。。

Marketing Sphere