0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Vue-gtmを使う

Last updated at Posted at 2019-06-07

注意:@gtm-support/vue-gtm が最新です。

下記は2019年頃のやり方です。

Vue-CLI 3でGTMを入れる

プラグインがあった。
https://www.npmjs.com/package/vue-gtm

どこに書くのか

自分の場合はvue-routerを使うのでそこに書いておきました。

router.js
import VueGtm from 'vue-gtm'

開発用サーバーのアクセスが混ざらないように、分けておきます。
GTMのタグは開発用と、本番用の2つ用意した方が良いです。

router.js
if(location.hostname != 'www.example.com'){
  Vue.use(VueGtm, {
    id: 'GTM-▲▲▲▲',//開発用
    enabled: true, 
    debug: true,
    // vueRouter: router,
    ignoredViews: ['']
  });
}else{
  Vue.use(VueGtm, {
    id: 'GTM-●●●●',//本番環境
    enabled: true,
    debug: true,
    // vueRouter: router,
    ignoredViews: ['']
  });
}

「vueRouter: router」が(私の場合)うまくうごかないように思ったので
コメントアウトしてます。GTM側のトリガーで対応しました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?