ページURLが遷移しないSPAの予約フォームにタグマネージャを仕込みたく、仮想URLの設定を以下サイトを参考にして行いました。
https://www.marketechlabo.com/track-form-transition-in-same-url/
以下jsコード
lang
1(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 2(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 3m=s.getElementsByTagName(o) 4[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 5})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 6 7ga('create', 'UA-xxxxxxxx-xx', 'auto'); 8 9var strCommonPath = '/reservation/'; 10var steps = { 11 '/reservation/customer.html': '予約情報入力', 12 '/reservation/card.html': 'お支払い情報入力', 13 '/reservation/confirmation.html': '予約情報確認', 14 '/reservation/complete.html': 'チケット購入完了', 15}; 16 17if (window.location.path == strCommonPath){ 18 var matched = false; 19 for (var i in steps){ 20 if (!matched && steps[i] == document.getElementsByTagName('')[0].innerText){ 21 ga('send', 'pageview', {'page': i}); 22 matched = true; 23 break; 24 } 25 } 26 if(!matched){ 27 ga('send', 'pageview'); 28 } 29 30}else{ 31 ga('send', 'pageview'); 32}
これを以下のようにpugファイルに読み込ませています。
doctype html block root - var rootName = ""; html(lang="ja", id="html") head include /parts/meta.pug script(src="js/tag_manager/snippet.js") #省略 block header_script body // Google Tag Manager (noscript) noscript iframe(src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden") // End Google Tag Manager (noscript) block header block body block footer block footer_script
jsファイル自体は正しく読み込まれているのですが、タグマネージャのプレビュー画面が現れず、うまく連携されていないと思います。
なお、こちらがタグマネージャのコンテナ作成時にデフォルト生成されたスニペットです。
// Google Tag Manager script. (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX'); // End Google Tag Manager
上記コードをそのままjsファイルに埋め込むと、コンソールにて"ga is not defined"のエラーが出てしまいます。
解決策が見当たらず、助けていただけると幸いです。
よろしくお願いいたします。
JSに読び出すのはGoogleアナリティクスではなく、タグマネージャーでは無いのでしょうか?
コメントありがとうございます。質問の最後のコードはタグマネージャを呼び出しているかと思いますが、これをJSに書くと、ga is not definedとなってしまいます。どこかでgaを定義する必要がありそうなのですが、どこで記述すればいいかわかりません、、
「> どこかでgaを定義する必要がありそうなのですが、どこで記述すればいいかわかりません」→ タグマネージャーのみを設定していて、中のタグにGoogleアナリティクスは入れていないと言う事でしょうか?
「> タグマネージャのプレビュー画面が現れず・・・」→以前から細かな不具合や動作が思ったようにいかない部分はありますが、Googleアナリティクスの計測に問題が無ければ、良しとするしかないかもですね・・・。