KARTEを導入したい！

筆者はKARTEというCXプラットフォームを開発したり導入したりしている会社に勤めている。

KARTEとは、ウェブサイトに訪れたユーザーの行動を解析し、個々のユーザーに適切なアクションや個別最適化されたサイトを表示できるようにすることでユーザーの体験価値を向上させようというSaaSだ。

筆者は自身でKARTEを企業に導入したり、開発をおこなったりしているわけでKARTEを入れて色々試せる環境が欲しいと考えている。そこで、今回自分が作ったこのtechブログにもKARTEを導入することにした。

NuxtのサイトにGTMを導入する

まず、このサイトはNuxtを用いて作成されている。

前提としてNuxtの設定は簡単に以下だ。

ssr: true
target: server

つまりSSRのサイトをNuxtで構築している。

さて、GTM（Google Tag Manger）をなぜ導入したいか？
簡単に言えば、どんなタグも発火させやすくわかりやすいためKARTE以外のプロダクトも簡単にタグ設置できるからだ。今後KARTE以外のプロダクトも使いたくなることであろうと想定されるのでGTMは万能で便利と思いとりあえず入れておくことにする。

まず@nuxtjs/gtmを入れる

GTMの環境をまず発行しよう。
https://tagmanager.google.com/
発行自体は簡単だから上記のURLからやってみよう。

発行したら GTM-XXXXXXX みたいなIDが発行されるのでそれを控えておく。

次にNuxtサイトのプロジェクトディレクトリに移動して yarn add @nuxtjs/gtm　する。

yarn add @nuxtjs/gtm
yarn add v1.22.17
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "nuxt > @nuxt/components@2.2.1" has unmet peer dependency "consola@*".
warning " > @babel/eslint-parser@7.16.3" has unmet peer dependency "@babel/core@>=7.11.0".
warning "@nuxtjs/eslint-config > eslint-plugin-jest > @typescript-eslint/experimental-utils > @typescript-eslint/typescript-estree > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning "@nuxtjs/eslint-module > eslint-webpack-plugin@2.6.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ @nuxtjs/gtm@2.4.0
info All dependencies
└─ @nuxtjs/gtm@2.4.0
✨  Done in 4.05s.

問題なく入ったら次はnuxt.config.jsの編集をする

nuxt.config.jsにgtm moduleを入れる

  modules: ['@nuxtjs/gtm'],
  gtm: {
    id: 'GTM-XXXXX',
    pageTracking: true,
    enabled: true, // trueならyarn devの場合でもGTMイベントを送信する
  },

modulesに @nuxtjs/gtm を追加して、gtm moduleの設定を下に書き連ねる。
enabledをtrueにしておくとlocalの開発環境でもGTMが使える。
idにはさっき控えたGTMのコンテナIDを入れる。

これでGTMがNuxtサイトに入った。
確認方法としてはGTMのタグ検知chrome拡張を使おう。

https://chrome.google.com/webstore/detail/tag-assistant-legacy-by-g/kejbdjndbnbjgmefkgdddjlbokphdefk?hl=ja

legacyなので非推奨なのかも。だが、フツーに便利。使える

GTMにKARTEを入れる

KARTEタグを取得したらGTMにいれる。SPAオプションは不要。
GTMでのタグトリガー設定は全てのページにした。
これで、一応トラッキングはできる状態になったけど、もしかしたら実際に閲覧しているページのURLとタイトルがずれるかも。（まだ検証できていない）

大体は問題なさそうだから今のとこ上記の設定で放置している。
少なくとも今のところ接客アクションの配信には問題が出ていない。DOMがmountされた時にKARTEのタグが発火されるようにすれば多分問題ないはず。

詳しくは本家のサポートサイトを見よう。
https://support.karte.io/post/7iEe2Icy4ggtnUVmyp6VNl

これで、KARTEのトラッキングが始まる。
あとは接客設定するなり、色々して遊んでみよう！

Articles in 2022

「&」という文字列を入れたらslack webhookで400がめっちゃ帰ってきた件

KARTEをGTM経由でNuxtに導入してみた

Hello Wolrd！

NuxtをCloudBuildでデプロイする際にシークレットを渡す