0

表題の通りですがvue.jsの特定のページでGoogleAnalyticsが使用できず困っています。

システムの構成としては
step1~step3 -> 入力フォーム画面
complete -> 上記入力フォームのstep3まで入力完了後遷移する画面
の様な構成となっておりvue routerを使用して各component(step1~step3及びcomplete)を
呼び出すシステムでしてこの中のcomplete画面でのみGoogle Analyticsを使用したいという内容となります。

試してみた事としましては、components>complete.vue内に以下の形でアナリティクスコードを埋め込みましたが反映されませんでした。

試したコード

vue及びGoogleAnalyticsに疎く恐れ入りますが
ご教示頂けますと大変助かります。
何卒よろしくお願い致します。

1 件の回答 1

0

scriptタグを使いたい場合は直接DOMを作ると良さそうです。
ページ表示時にheadタグにscriptタグを追加します(headでなくても良いです)。そのまま他のページに遷移するとGoogle Analyticsのタグが残ったままなので削除するようにしています

実際にGoogle Analyticsのタグで試したわけではないですが、参考までに

<script>
export default {
  data() {
    return {
      script: null,
    };
  },
  created() {
    // ページ表示前にgtagを読み込む
    this.script = document.createElement("script");
    this.script.async = true
    this.script.src = "gtagのURL"
    document.head.appendChild(this.script);
  },
  destroyed() {
    // ページ移動前にgtagを削除
    this.script.remove();
  },
};
</script>
2
  • 回答しましたが、上記の方法ではだめそうです。スクリプトを読み込んでるのでタグを消してもGoogle Analyticsのオブジェクトは消えないですね…。gaのメソッドで無効、有効を切り替えないといけないようです
    – sugumura
    Commented 2021年3月25日 13:49
  • ご回答有難う御座います。ご返信遅くなり大変申し訳ございません。やはり一筋縄ではいかないのですね。。一旦静的ページへのリダイレクトで対応する事も視野に入れもう少し調査してみます。有難う御座いました。
    – wolf
    Commented 2021年4月1日 11:39

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。