https://qiita.com/cheez921/items/a9e8d257684098db55c3

モダンフロント技術におけるGTMの問題

ここでいうモダンフロント技術は、VueやReactなど仮想DOMを用いられた技術を指します。

仮想DOMなので「DOMが存在しているとは限らない」

要素の表示や要素のクリックなどのトリガーに関して、class名やらid名などDOMの情報に対して条件を絞りイベントを制御すると思いますが、必ずしもGTMがその仮想DOMが正しく検知できるとは限らないです。 仮想は消失したり入れ替わったりするものなので。

そのため、GTMの既存の要素の表示や要素のクリックに依存しない設計を理想とします。

GTMのページビュートリガーが使えない

モダンフロント系の技術では、React Routerやらvue-routerなどの仕組みによって、 サーバーサイドを介さずにクライアントサイドのみでページの変更を行なっているケースが多いです。

つまり、History APIで更新しているだけなので、ページビュートリガーが機能しないです。

仮に既存のGTMのトリガーを使うとしても、初期ロード時は「ページビュー」、遷移時は「履歴の変更」が発火するため、 2つのトリガーを1つのタグに対して付与する必要があります。 ※ 正しく発火する保証はしきれないかなとおもいます...重複するケースがありそうな気もしてます。

モダンフロント技術におけるGTMとの付き合い方

既存のトリガーがすこぶる使えなさそうで「じゃあどうすればいい？GTM使わなければいい？」って思った人もいると思いますが、 ここでカスタムイベント トリガーの登場です！

カスタムイベント トリガーとは？

カスタムイベントトリガーは、キー名event / 値イベント名でdataLayer.pushされたものを検知するトリガーです。

下記のように設定します。

dataLayer.push({
  event: "page_view" // eventパラメータにイベント名をいれる
})

▼ ドキュメント

つまり、ページビューやら要素のクリックなどをコード側で検知して、 このデータレイヤーをpushしてあげれば良いわけです！！