zenbackをGoogle Tag Managerで遅延読み込みさせる

ページ読み込みスピードを上げるために遅延させたい

最近では不要かもしれませんが、SEO対策の被リンク対応の一つとしてzenbackを導入しているのですが、これを導入することにより、zenbackウィジェットに必要なJSとかjQueryが降ってきます

//w.zenback.jp/v1/?base_uri=***
//w.zenback.jp/_p/js/jquery.min.js

ページの最下部に表示しているので、真っ先にzenbackを読み込む必要ながないので、いくつかのパターンで遅延させることができないかなと思いました。

画面スクロールされたら読み込み開始
ページ表示開始の数秒後に読み込み開始
zenbackが表示される部分が登場したら読込開始

これのどれか、または全部で遅延できる手段が何かないかなといろいろ探したら、Google Tag Manager で簡単にできることが分かったのメモ。

jQueryのLazy Loadとか、Javascriptで非同期や遅延読み込むする方法もありますが、Google Tag Manager を使う方法が最もシンプルで簡単でいいかもしれません。いろいろな条件でいろいろなタグを組み込めるので最近ハマっています。

Google Tag Managerで遅延表示させる方法

Google Tag Manager がどういう物かの説明は省きます。

1. 『新しいタグ』をクリック

2. タグを追加するため右上の鉛筆マークをクリック

3. 『カスタムHTML』を選択

4. zenbackのタグを貼り付ける

実際には以下のように改変して貼り付けています。<div id="zenback-widget-loader"></div>とJavascriptを分離して、Javascriptの部分だけを貼り付けています。

<!-- X:S ZenBackWidget -->
<script type="text/javascript">
 !function(d,i){
 if(!d.getElementById(i)){
 // オリジナル var r=Math.ceil((new Date()*1)*Math.random());
 var r = new Date();
 var r = ''+r.getFullYear()+('0'+r.getMonth()).slice(-2) ;  //randの値を年月（例 202005）にする 
 var j=d.createElement("script");
 j.id=i;
 j.async=true;j.src="//w.zenback.jp/v1/?base_uri=http%3A//qwerty.work&nsid=XXXXXXXXXXXXXXXXXX%3A%3AXXXXXXXXXXXXXXXXXXX&rand="+r;
 d.body.appendChild(j);}}(document,"zenback-widget-js");
 </script>
<!-- X:E ZenBackWidget -->

<div id="zenback-widget-loader"></div>はウィジェットを表示させる部分に記載します。「document.writeをサポートする」や「詳細設定」は特に設定しませんでした。

※ページ下部でも記載していますが、このタグが空のままだと失敗しますので、ご注意ください。

5. トリガーを追加するため鉛筆マークをクリック

6. 新しいトリガーを作成するので + マークをクリック

7. トリガーの名前を付けて鉛筆マークをクリック

8. 『要素の表示』を選択

9. 要素の欄に「zanback-widget-loader」と入力して保存

10. 保存して閉じる

11. 『公開』ボタンをクリック

公開しないと設定しただけで終わるので注意。公開ボタンを押すとバージョン名を設定する画面に進みます。

12. バージョン名を設定して『公開』して完了

追加や変更があった場合、バージョン名を設定して公開ボタンを押さないと反映されません。私の場合。バージョン名は日付にしていますが、『zenback追加』とかここは何でもいいです。最後に『公開』ボタンを押したら作業は完了です。

ウィジェットが表示されないとき

最初、タグの登録が終わって、ページ表示テストをしたときzenbackのウィジェットが表示されませんでした。以下のページによると、要素（<div id="zenback-widget-loader"></div>）が空だと高さ判定で弾かれ、トリガーが発動しないみたいです。

Link

Google タグマネージャのトリガー「要素の表示」が動作（発火）しない理由と正しい設定方法

https://jdash.info/archives/Google_Tag_Manager_Element_Visibility_Trigger_not_fire

私の場合、仮にタグを以下のように「その他お知らせ」を追加したところうまく表示できました。

<div id="zenback-widget-loader"></div>

↓

<div id="zenback-widget-loader">その他お知らせ</div>

複数のトリガーを設定しておいた方がいいかも？

今回は参考にzenback-widget-loaderという要素が現れたら表示するようにしましたが、検索ロボットが来たときはどうなるだろう？という疑問が残りました。今回の場合、ページ下部までスクロールされれば表示されますが、スクロールされなければ表示されず無い物という扱いになうのではないかと思いました。

折角設置しているのに無い物扱いだと意味がないので、今回の『要素の表示』と『タイマー』を組み合わせて、スクロールされなくても3～5秒後には強制表示みたいなことをしておけば安心かもしれません。

PageSpeed Insightsで100点が出た！！

これが効いたのかどうかわかりませんが、この記事を投稿した直後にPageSpeed Insightsで計測したら100点でした。マグレでも嬉しいです。

Braveなどでは表示されなくなるので注意！！

Google ChromeやEdgeでは問題ないのですが、Braveなどセキュリティ要素が強いブラウザではzenbackウィジェットが表示されなくなるので注意してください。Google Tag Managerのタグの書き方で回避できるかもしれませんが、それはまた今度探そうと思います。