guess-js/guess: Libraries & tools for enabling Machine Learning driven user-experiences on the web の README.md に、InstantClick — JS library to make your website instant の記載がありました。

存在を知らなかったのですが、DEV Community 👩‍💻👨‍💻 - Where software engineers connect, build their resumes, and grow. のリンク先ページの先読みに使用しているライブラリらしいです。

ただ、長い間メンテナンスされていなさそうで、他のライブラリがあるか探したところ、turbolinks/turbolinks: Turbolinks makes navigating your web application faster が一番メジャーなライブラリに思えました。

サイトに turbolinks を仕込んでみましたので、実施した内容を記載します。

前提

以下の環境で動作確認は実施しています。

Turbolinks、InstantClick の 違い と その他のライブラリについて

Turbolinks、InstantClick の 違い と その他のライブラリについて調べて見た結果を記載します。

  • Turbolinks、InstantClick の 違い
    Turbolinks は、mouseover での先読みは行わず、InstantClick は mouseover での先読みを行うのが大きな違いかなと思いました。
    turbolinks “instantclick” · Issue #313 · turbolinks/turbolinks という Issue もあり、Turbolinks は mouseover での pjax は 対応してなさそうです。
    もう1点違いがあるとすると、head タグ、body タグ内の element の読み込み方で、トラブルの少なさだと良くメンテされている Turbolinks のほうがトラブルは少なそうかなと思いました。

  • その他のライブラリについて
    barba.js vs smoothstate vs swup vs turbolinks | npm trends を見るとダウンロード具体から、turbolinks が一つ頭抜けてダウンロードされていることがわかります。

swup、barba.js、smoothState.js のダウンロード具合の比較は以下を見るのがわかりやすいです。
barba.js vs smoothstate vs swup | npm trends
個人的に swup は plugin 方式で 機能を追加できるようでおもしろそうかなと思いました。
正しいかはわかりませんが、個人的な認識だと これらのライブラリは、pjax 系 ライブラリ と呼んでいいかなと考えています。
SPA とは違う方向で、JavaScript を使う Web アプリケーション の作り方で、サイト特性によっては SPA よりもこれらのライブラリを使うほうがハマるケースがあるかなと思います。

インストール

npm で インストールができます。 

% npm install turbolinks     
+ turbolinks@5.2.0
added 1 package from 1 contributor in 21.757s

プログラム、設定ファイルの変更

以下の通り、プログラム、設定ファイルの変更をしました。

エントリポイントになる JavaScript の作成

既に存在するエントリポイントの JavaScript ファイルとは分けて、作成しました。
これは、turbolinks の読み込み記述は head タグ内に記載する必要があるためです。
また、サイト上では Google Tag Manager を介して ページビューを記録しています。
このため turbolinks:load 内では、dataLayer 変数で GTM イベントを送付するようにしました。

  • pjax.js 
// ES6
import Turbolinks from 'turbolinks'
// Turbolinksで遷移した場合の初期化処理
document.addEventListener('turbolinks:load', function(event) {
  var url = event.data.url;
  dataLayer.push({
    'event':'turbolinks_load_pageView',
    'virtualUrl': url
  });
});
// Turbolinks処理開始
Turbolinks.start()

ちなみに、head タグではなく body タグに turbolinks の記述を追加すると警告が表示されます。
警告の内容は以下にまとめました。気になる方はご確認ください。
Turbolinks を body タグ内で start させてはいけない

webpack.config.js の修正

エントリポイントとして、/pjax.js を追加しました。 

module.exports = {
    mode : "development",
    context: __dirname + '/src',
    entry: {
        pjax: ["./js/pjax.js"],
        // ページごとに異なるエントリポイントを設ける
        bundle: ["./js/index.js"]
    },

HTML template に pjax.js の記載を追加

Django からの webpack を使うため、以下の plugin を使用しています。
owais/django-webpack-loader: Transparently use webpack with django

HTML template 上には以下の記述を追加しました。 

{% render_bundle 'pjax' 'js' attrs='async defer chatset="UTF-8"' %}

Google Tag Manager の設定変更

初回表示時は、ページビュートリガ で Google Analytics への記録ができますが、リンククリック時のページビューは turbolinks 導入後はHTML 要素の置換となり、ページ遷移にはならず、ページビューが記録されません。
GTM イベントトリガ で記録を行う必要があります。

  • イベントトリガの追加
    イベント名 turbolinks_load_pageView でイベントトリガを作成します。
    "トリガ"

  • Google Analytics タグ に イベントトリガ を追加
    タグにイベントトリガを追加します。 ページビューとは OR 条件でつなげます。
    "タグにトリガを追加"

  • virtualUrl について
    イベントトリガで Google Analytics にページビューを送信する場合、path の設定が必要に思いましたが、何もせずともうまく記録してくれました。
    virtualUrl という変数を設定すると、よしなに計らってくれるのかもしれません。

Google Optimize の設定変更

Trubolinks 使用時は ページの読み込みの評価 では画面遷移の検知ができず、AB テストが起動しません。
以下、アクティベーション イベントで AB テストが起動するように変更します。
アクティベーション イベント - Optimize ヘルプ

turbolinks_load_pageView を カスタム イベント として追加します。
“カスタムイベント”

これで リンク遷移時に AB テストが起動して画面のレイアウト変更が適用されます。

参考

以下、調べた際に閲覧した記事になります。

以上です。

コメント

カテゴリー

最近の投稿