web-dev-qa-db-ja.com

Nuxt.js Google Tag Managerの実装を手伝ってくれる人はいますか？

ちょっと私はNuxtアプリを構築しましたが、パッケージに問題があります@nuxtjs/google-tag-manager パッケージ。以下にあります。ドキュメントは非常に軽く、多くの実装例は見当たりません。私のnuxt.config.js次のセットがあります。

['@nuxtjs/google-tag-manager', {
  id: process.env.GTM_ID,
  layer: 'dataLayer',
  pageTracking: true
}],

..しかし、残念ながら、GoogleタグマネージャでPage Viewsを取得していません

GTMを最適に実装する方法や、何が効果的であるかについて、アイデアや経験はありますか？

前もって感謝します

vue.jsgoogle-tag-managernuxt.js
8
RuNpiXelruN

パッケージを見て、modules/packages/google-tag-manager/plugin.jsの中に次のコードがあります：

window['<%= options.layer %>'].Push(to.gtm || { event: 'nuxtRoute', pageType: 'PageView', pageUrl: to.fullPath, routeName: to.name })

それから、データレイヤーは次のようになります。

{
event: 'nuxtRoute',
pageType: 'PageView',
pageURL: to.fullPath,
routeName: to.name
}

したがって、GTMでは、「nuxtRoute」イベントでトリガーするカスタムイベントトリガーを定義できます。そのように： enter image description here

次に、pageURLおよび場合によってはrouteNameをキャプチャする2つのDataLayer変数をGTMで作成します。routeNameはオプションで、ドキュメントを変更/更新するかどうかによって異なります。 enter image description here

次に、GTMでGoogle Analyticsタグを作成します。それが「ページビュー」タイプであることを確認し、「このタグのオーバーライド設定を有効にする」チェックボックスをオンにします。 to.name変数を使用してページタイトルを設定する場合は、「title」フィールドを使用します。 「トリガー」の下にもnuxtルートトリガーを必ず追加してください。 enter image description here

すべてを保存して公開するか、または プレビューモード で実行すると、ページビューが多少表示されます。

14
XTOTHEL