###前提・実現したいこと
UserAgentの判別によって、PC用とスマホ用の表示が切り替わるランディングページを作成しています。
急遽、アクセス解析の材料とするため、QRコードから流入してきた際にそれが計測できるよう、QRコードのURLに?を続けて、パラメータをつけることでQRコードからのアクセスをGoogleアナリティクスでカウントできるよう準備中です。
###発生している問題・エラーメッセージ
その際、下記のようなエラーが発生しています。
・QRコードにより、http://AAA.com/?test という内容を埋め込んだ上で、スマホからアクセスする
・UserAgentのjavascriptにより、http://AAA.com/sp/index.htmlにリダイレクトされる(←この時点で?以降のパラメータが落ちてしまい、アナリティクスで計測できない)
現在、
・UserAgent判別用のjavascrpt
・パラメータ付き(QRコードからのアクセス)のアクセスの場合の遷移用の条件分岐Javascript
この2つのjavascriptをindex.htmlで読み込もうとしていますが、うまく動作せず、スマホ用の/sp/index.htmlにUserAgent判別することすらできない状態になってしまっています(パラメータ判別を除くと、PC or スマホ判別は動作します)
###該当のソースコード
userAgent.jsの記述内容
(function(){ var ua = navigator.userAgent.toUpperCase(); var url = document.location.pathname; var spDir = '/sp/'; if (ua.indexOf('IPHONE') != -1 && ua.indexOf('MOBILE') != -1) { isSP(); } else if (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1) { isSP(); } else if (ua.indexOf('IPAD') != -1 && ua.indexOf('MOBILE') != -1) { isSP(); } else { isPC(); } // (ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1))? // isSP() : // isPC(); function isSP(){ if(url.match(spDir)){ return false; }else{ location.href = './sp/index.html'; } } function isPC(){ if(!url.match(spDir)){ return false; }else{ location.href = './'; } } }());
パラメータ付きリダイレクト用のファイルの記述内容(para.js)
(function() { // URLのパラメータを取得 var urlParam = location.search.substring(1); var ua = navigator.userAgent.toUpperCase(); var url = document.location.pathname; var spDir = '/sp/'; // URLにパラメータが存在する場合 if(urlParam) { // 「&」が含まれている場合は「&」で分割 var param = urlParam.split('&'); // パラメータを格納する用の配列を用意 var paramArray = []; // 用意した配列にパラメータを格納 // for (i = 0; i < param.length; i++) { // var paramItem = param[i].split('='); // paramArray[paramItem[0]] = paramItem[1]; // } console.log(urlParam); if (urlParam == 'test') { location.href= './sp/index.html?test'; } else if (urlParam == '') { return false; } })();
index.htmlの抜粋
<!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]> <html class="no-js"> <![endif]--> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./css/style.css" type="text/css"> <link rel="alternate" media="only screen and (max-width: 640px)" href="index.html" > <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> <script type="text/javascript" src="./js/para.js"></script> </head> <script type="text/javascript" src="./js/userAgent.js"></script> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script>window.jQuery || document.write('<script src="./js/jquery-1.10.2.min.js"><\/script>')</script> <script src="./bootstrap/js/bootstrap.min.js"></script> <script> $(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 600; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script> <script type="text/javascript"> $(function() { var topBtn = $('#page-top'); topBtn.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> <script> $(document).ready(function () { $(".navbar-nav li a").click(function(event) { $(".navbar-collapse").collapse('hide'); }); }); </script> </body> </html>
###試したこと
条件分岐を読み込ませる順番を変えるなどを試みました
###補足情報(言語/FW/ツール等のバージョンなど)
javascript、HTML、CSS、Bootstrapを利用しています
回答1件