webページにチャット機能を入れる方法

弊社のお客様で Smallchat を入れられている方がおられて，引き合いが来たことがあるということを聞いたので早速このサイトにも入れてみたのだが，PageSpeed Insights の点数が 30点ぐらい悪くなるので，ちょっと問題があると思い，一旦停止した．

その後，ちょっと思いついたことがあったので再度チャレンジしてみたところ，PageSpeed Insights の点数には全く影響のない実装方法が分かったので備忘録がてら記事にしておく．

なお，この改造はもちろん正式なものではないので，途中で動かなくなる可能性があることを分かった上で使ってほしい．

Smallchat とは？

ウェブページに簡単にチャット機能を取り入れられる Smallchat は slack と連携してリアルタイムにお客様と話(チャット)が出来るツール．
無料の範囲でも営業時間を決めたり，オフライン時にメッセージが表示されたり，メッセージをカスタマイズ出来るので非常に使い勝手が良い．

弊社では勉強会のフォローなども slack で行っていて基本的に常時つながっており，そういう意味でも使いやすいので試しに導入してみた．(2021年8月現在)

Smallchat の問題

設定は簡単で slack を使ったことがあるなら比較的簡単に実装出来る．

しかし，上に書いたように一つ問題がある．

とても遅いのだ．というか，PageSpeed Insights で 30点ほどマイナスされるほど遅い．

よく見てみると読み込みに非常に時間がかかっている．
async とか defer 使えばいいのか？と思うのだが使っても遅い．
(そもそも，async をつけるように説明にも書いてある．)

でも，よく考えると読み込み直後にこのスクリプト読み込みに行く必要ないんじゃないの？と思ったのが解決のきっかけ．

Pagespeed Insights スコア問題解決方法

スコアを落とさない方針としては「javascript の読み込みをもっと遅延させる」ようにすることである．

スクリプトの変更

smallchat のサイトで登録を行うと Smallchat を設置したいページに以下のスクリプトを入れるように言われる．

<script src="https://embed.small.chat/xxxxxxxxxxxxxxxxxxxxxxxxx.js" async>

もちろん，xxxxxxxxxxxxxxxxxxxxxxxxx.js は各自違う．

このスクリプトを見てみると最後は

window.addEventListener('load', function(){var styles = document.createElement('link'); styles.rel = 'stylesheet'; styles.href = 'https://static.small.chat/messenger.css'; document.head.appendChild(styles); var script = document.createElement('script');script.async = true;script.src = 'https://static.small.chat/messenger.js'; document.body.appendChild(script);}, false);

となっている．まず，この最後の部分の addEventListener をやめる．

var styles = document.createElement('link'); styles.rel = 'stylesheet'; styles.href = 'https://static.small.chat/messenger.css'; document.head.appendChild(styles); var script = document.createElement('script');script.async = true;script.src = 'https://static.small.chat/messenger.js'; document.body.appendChild(script);

と変更して，自分のサイトに持ってくる．注意点としてこの部分の上のスクリプトはそのままにしておくこと．これは自分の接続情報が入っているので消してはダメ．

以下，これを仮に smallchat.js として，/js の下に置いたとする．

タグマネージャーのタイマーで起動

javascript の遅延読み込みはタグマネージャーで行う．

タグマネージャの設置方法

今回はタイマーで5秒としたが，スクロールで50%や，ある要素が出現した時など要は遅延さえすれば何でもいいはずである．

トリガーの設定

そして，この javascript の起動はタグマネージャーで行う．
タグマネージャなら読み込みのタイミングは自由に決められる．
仮に5秒経ってから読み込みにいかせる場合，以下のようにトリガーを設定する．

下のように設定した場合，/service/ 以下のページ全てに適用される．

タグの設定

こちらは「カスタムHTML」を選択し，先ほどの javascript を指定するだけ．

<script src="/js/smallchat.js"></script>

を設定する．

注意事項

タグマネージャー万歳と言いたいところだが，一部の広告ブロック拡張機能などが入っていると動かないこともある．

また将来，Smallchat がバージョンアップして，javascript の中身が変わった時には動かなくなる可能性があるので，そこは理解した上で試してみてください．

上記のことを試してみても点数が上がらない場合，5秒以内にページの読み込みが終わっていない可能性がある．
その場合，ページ自体を出来るだけ軽くすること，どうしても5秒以内に読み込みが終わらない場合は 8 秒とか読み込みが終わる秒数まで伸ばすことが必要になる．