【お約束】 投稿内容は個人の見解であり、所属する組織の公式見解ではありません。
名前：uyamazak（昔いた会社で上司が「yuyamazaki」が長いので勝手に作ってくれた。読み方わからないけどウヤマザク）
株式会社ビズオーシャン エンジニアリング部リーダー。
コミケ3日目で10年以上売り子無欠勤
アズールレーン@竹敷でUI、UX研究中（初嫁ジャベリン）
GitHub: https://github.com/uyamazak/
関わってるプロジェクト
続きを読むVue.jsからGTMを使ってGAのイベントを送る
ブログタイトルのGAはGoogle Analytics（以下GA）ではないですが、Google Tag Manager（以下GTM）でGAを読み込んでいる場合、独自イベントの送信がちょっと面倒です。
下記のようなVueプラグインもあるけど、Vue.jsの環境はVue CLI 3で、GTMのタグはindex.htmlに公式通りに入れているため、今回はスルーした。
dataLayerを使う
GTMから独自変数を送るにはdataLayerというグローバル変数を使うらしい。
Developer Guide | Google Tag Manager for Web Tracking | Google Developers
dataLayerを制するものはGTMを制す - Qiita
こんな感じでなんでも送れる。
dataLayer.push({'event': 'event_name'});
dataLayer.push({
'color': 'red',
'conversionValue': 50,
'event': 'customizeCar'
});
シンプルなVueプラグインを作る
とりあえずエラーイベントを送るように下記のような感じで作った。
category, action, labelはGAのイベントと合わせた。
gtm-datalayer.js
const gtmDataLayer = {
install: function (Vue, options) {
const dataLayer = window.dataLayer || []
Vue.prototype.$gtm = {
sendErrorEvent: function(category, action, label){
dataLayer.push({
event: 'error',
eventCategory: category || 'defaultCategory',
eventAction: action || 'defaultAction',
eventLabel: label || 'defaultLabel'
})
}
}
}
}
export default gtmDataLayer基本的にGTMのタグはHTMLの上の方で先に読み込んでいるはずで、dataLayerがセットされていないことはないはずだけど念の為、dataLayerがなくてもエラーが起きない（何も起きない）ようにしている。クリティカルな場面では使わないはず。
main.jsでインストールする
import GtmDataLayer from './plugins/gtm-datalayer' Vue.use(GtmDataLayer)
これでvueのscript内から
this.$gtm.sendErrorEvent('お好きなカテゴリ', 'お好きなアクション', 'お好きなラベル')みたいな感じで使える。
GTMで変数追加
勝手に送った変数はそのままでは使えない
ユーザー定義変数に上記、eventCategory、eventAction、eventLabelを追加する
GTMでカスタムイベント追加
カスタムイベントを受け取るトリガーを追加する。
とりあえず「すべてのカスタムイベント」にしたけど、あとで分けるなら、追加した変数を指定すればよさそう。
GTMでGAイベントのタグを追加
上で作った変数とトリガーを使って作る。
あとは公開するだけ。
Vue.js側から送信
これで送る。
今回はヤギが渡したはがきを食べた場面で送るようにした
//省略
methods: {
sampleError: function(){
this.$gtm.sendErrorEvent('yagi', 'eat', `yagi ate postcard! ${this.eatCount}: ${this.content}`)
}
}
//省略
GAのリアルタイムイベントで確認
取れた。
イベント名を汎用的なものに変更（2018/11/16追記）
GTM側のGTMのトリガーのイベント名をerrorで作ってしまったけど、エラーに限らず汎用的に使えるのでappEventに変更し、エラーはCategoryを使うようにしてみた。
const EVENT_NAME = 'appEvent'
const gtmDataLayer = {
install: function (Vue, options) {
const dataLayer = window.dataLayer || []
Vue.prototype.$gtm = {
sendError: function(action, label){
dataLayer.push({
event: EVENT_NAME,
eventCategory: 'appError',
eventAction: action || 'defaultAction',
eventLabel: label || 'defaultLabel'
})
}
}
}
}
export default gtmDataLayerこれで、エラーを送るときはカテゴリはappErrorで固定、actionとlabelだけ指定すればよくなった。actionに要約、labelに詳細みたいな感じで書けるので使いやすそう。
this.$gtm.sendError('yagiEte', `yagi ate postcard! count:${app.eatCount}, message:${tmpContent}`)
- 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
- 出版社/メーカー: 技術評論社
- 発売日: 2018/09/22
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
現場で使えるVue.js tips集 (技術書典シリーズ（NextPublishing）)
- 作者: 渋田達也
- 出版社/メーカー: インプレスR&D
- 発売日: 2018/10/05
- メディア: Kindle版
- この商品を含むブログを見る
GCP HTTPSロードバランサーにGoogleマネージドSSL証明書（β）を使う
βリリースされていることに今更気づきました。
GAEやFirebase HostingでもマネージドSSL証明書は追加されていたのでやっと来たという感じです。
ドキュメントはまだ英語のみ？
Creating and Using SSL Certificates | Load Balancing | Google Cloud
これまでは下記自作のスクリプト＋ライブラリと開発サーバーのcronで回してきましたがいらなくなりそう。
GitHub - uyamazak/gcp-ssl-auto-renewer: Auto renew SSL Certificates commands on Google Cloud Platform (GCP).
作成自体もUI（Cloud Console）で出来るようになっていました。
「ロードバランサーの詳細」→「編集」→「フロントエンドの設定」→「プロトコル:HTTPS」→「証明書」で新しい証明書を追加できます。
プロビジョニング（セットアップ）に時間がかかり、その間は無効になってしまうので、稼働中のサービスは切り替えでなく、「その他の証明書」に追加でやればよさそう。
現在テストのため、手動で上げたものを「証明書」に、マネージドを「その他の証明書」追加した。
追加した場合どの証明書が使われるかはよくわからない。さっきブラウザで確認すると、マネージドの方が使われてた。
後日勇気を出してマネージドのみにしてみようと思う（影響の少ないドメインで）。
gcoudコマンドだと下記のような感じでステータスを確認できる。
% gcloud beta compute ssl-certificates list --project=<your-project-name> NAME TYPE CREATION_TIMESTAMP EXPIRE_TIME MANAGED_STATUS api-yagish-managed2 MANAGED 2018-11-11T18:39:18.120-08:00 2019-02-09T17:54:58.000-08:00 ACTIVE api.yagish.jp: ACTIVE
Let's Encryptの無料化と自動更新による恩恵は世界中のエンジニアの人件費として金額化したらとてつもないことになりそう。
【解決】puppeteerを1.10にするとPDFの日本語が文字化けする問題
2018/11/13 追記 結論
Chromium 72.0.3606.0(Developer Build)を使ったところ直ったので、次のバージョン（1.11）では直るはず。
そのため1.10をスキップするだけで問題は解決しそう。
追記ここまで
yagish履歴書のHTML→PDF変換で使っているpuppeteerのバージョンを1.8.0から1.10.0にしたところ、PDFで日本語が表示できなくなった。
Ubuntu16.04上のDockerで動かしており、puppetter以外の違いはないこと、screenshotの画像は問題なく日本語が表示されるので、フォントのインストールなどは関係なさそう。
リリース情報を見ると、1.9まではChromium 71、1.10からChromium 72を使うようになったのでそこが原因っぽい。
1.9も試したところ問題なかった。
またChromiumではなく別途インストールしたChrome70を、1.10から使った場合も大丈夫だった。
Releases · GoogleChrome/puppeteer · GitHub
生成されたPDFをChromeで開くと問題なく表示されるが、Acrobatで開くと下記のように警告がでる。
PDFへのフォントの埋め込みがうまくいってない？
2018/11/9 14時追記
GihHubのissueを見ていたら文字化けではないけどハングするというのを見つけた。
引き続き調査中
2018/11/13 追記
puppeteerとChrome側をいくつか差し替えて確認
- puppeteer 1.10 + Chromium 72 (デフォ) → NG
- puppeteer 1.10 + Google Chrome 70 → OK
- puppeteer 1.9 +Chromium 71(デフォ) → OK
- puppeteer 1.8 +Chromium 71(デフォ) → OK
ということでChromiuimバージョン72が日本語が表示できない原因である確率がかなり高そう。
1.10 + Chromeで動かす選択肢もあるが、バージョンは揃えた方がいいというのもどっかに書いてあったので、puppeteer1.9を指定してインストールして使うのが今のところ一番良さげ。
Chromium 72 をUbuntuの入っているノートPCで動かそうと思ったけど、apt-getだと70しか入れられず、なかなか面倒。
Developer Buildはバージョン72.0.3606.0、ビルド済みで簡単にダウンロード＆実行できたので、Yahoo!トップページをPDF化したところ、問題なく日本語フォントは埋め込まれ表示されてた。
Developer Buildは下記ページをブラウザの開発者ツールでUAをLinuxのものにしたらLinux版がダウンロードできる。
download-chromium.appspot.com
使用したUA
Mozilla/5.0 (X11; Ubuntu; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36
Developer Buildとpuppeteer同梱（72.0.3582.0）は細かいバージョン差があるため、Chromium72自体ではなく、puppeteer1.10との組み合わせの問題なのか、まだ確信が持てない。
そのため下記２つを試す。
- puppeteer 1.9 + Chromium 72.0.3606.0(Developer Build) → OK
- puppeteer 1.10 + Chromium 72.0.3606.0(Developer Build) → OK
なんとChromiumを最新の開発版にするだけで直ってしまった。つまりこのバグはChromium（72.0.3582.0）のもので、開発版ではすでに修正されているみたい。
puppeteer 1.11にはこの直ったChromiumが同梱されるはずなので1.10はスルーして1.11を待つことにする。