質問するログイン新規登録

Q&A

0回答

1175閲覧

GA4 - gtag.jsで実装したイベントにより、ブラウザバック機能が正常に作動しない

noliiiiii

総合スコア13

Google Analytics

Google AnalyticsはGoogleが開発した無料のウェブ分析のソリューションです。複数のクライアント側のAPIとデータをエクスポートし管理するREST APIも格納されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/07/01 23:54

編集2022/07/01 23:57

0

1

Google アナリティクスgtag.jsのイベントをサイトに埋め込んでいます。
script1 を <head>内に、 script2 を<body>内に埋め込んだところ、data-gaevent=""を埋め込んだaタグをクリックした際のイベントは発火し、Googleアナリティクスのリアルタイムページや、DebugView.からカウントが確認できています。

ところが、例えばトップページからイベントを仕込んであるaタグをクリック→ページBへ遷移し、その後ブラウザバックでトップページに戻ろうとすると、console上では1度トップページへナビゲートされるのですが、その後すぐに現在のページ(ページB)にナビゲートされてしまい、結果戻るボタンが機能しない事態となっています。
期待する動作は、ページBからボタンを押したらトップページに遷移する、です。

ブラウザにjs系のプラグインを入れているとこのバグは起きないのですが、シークレットモードなどにすると発生します。
Script2を除外してもこの事象は起きません。

Script2にブラウザバックを選択された時のための分岐が必要なのでしょうか。
わかる方がいれば、教えてください。

script1

<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX'); </script>

script2

/** * google analytics setting */ jQuery(function ($) { if (typeof gtag === "undefined") { return; } gtag("config", "G-XXXXXXXXXX", { transport_type: "beacon" }); $("a[data-gaevent]").on({ click: function (event) { var href = $(this).attr("href"); var transitioned = false; var is_page_transition = href[0] !== "#" && $(this).attr("target") !== "_blank"; if (is_page_transition) { event.preventDefault(); setTimeout(pageTransition, 1000); } function pageTransition() { if (!transitioned) { transitioned = true; location.href = href; } } var tagStrings = $(this).data("gaevent"); var tagCount = 0; var tagOutput; var isDone = false; tagOutput = tagStrings.split(/\s+/); tagCount = tagOutput.length - 1; for (var i = 0; i <= tagCount; i++) { if (i === tagCount) { isDone = true; } sendGA(tagOutput[i], isDone); } function sendGA(gaEventTag, isDone) { gtag("event", "click_a", { eventAction: gaEventTag, eventLabel: gaEventTag.replace(/-.*$/, ""), eventCategory: location.href.replace(/#.*$/, ""), hitCallback: function () { if (is_page_transition && isDone) { pageTransition(); } }, }); } }, }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.25%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問