Django を使ったサイトにtrubolinksを使う

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 を仕込んでみましたので、実施した内容を記載します。

前提

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

• OS
  

  cat /etc/redhat-release
  CentOS Linux release 7.5.1804 (Core) 
  

• アプリケーション
  Django のアプリケーションです。フロントエンドは webpack を使っています。
  組み込んだソース一式はkemsakurai/mezzanine-theme-clean-blog: Clean Blog based theme for Mezzanine CMS used by にあります。

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 テストが起動して画面のレイアウト変更が適用されます。

参考

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

• The Strange Storage: InstantClickの導入
• サボり指定をサボらない - Qiita
• Barba.jsを使って、metaタグを動的に更新する方法 - Qiita
• Barba.js
• gmrchk/swup: Complete, flexible, easy to use page transition library.
• turbolinksで静的サイトを擬似SPA化 – JSerによる導入Tipsを紹介 | maesblog
• turbolinksチートシート - Qiita
• Turbolinks、時々Vue.js - Misoca開発者ブログ
• Rails 5 Turbolinks and Google Tag Manager – Victor Hugo Bueno – Medium

以上です。