便利なGASレシピ集！に戻る場合は以下から
はじめに
どうも、ビジボットです。今回はGAS！ではなくJS（JavaScript）を使って
JS（JavaScript）を使ってGoogleAnalytics（グーグルアナリティクス）などで指定するutm_sourceのパラメータを選択してURLを生成するコードを作ってみました。実コードを記事に埋め込んでいます！
さらに、生成したコードをワンクリックでコピーができる設計なので、携帯でも簡単にコピペができます。
パラメータ生成ツール
完成イメージです。
実際に操作できるのでお試しください。
実際のコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<html> <head> <meta charset ="utf-8"> <script> function onButtonClick() { var target = document.getElementById("params_form"); var url = target.url.value; // alert('url:' + url); // form要素を取得 var params = document.getElementById("params_form"); // form要素内のラジオボタングループ(name="radio")を取得 var radioList = params.radio; // 選択状態の値(value)を取得 var param = radioList.value; //alert('params:' + param); var flg = url.indexOf('?') > 0 // ?が入ってるかチェック //alert('flg:' + flg); if(flg === true){ url = url + '&utm_source=' + param; }else{ url = url + '?utm_source=' + param; } //alert(url); document.getElementById('result_area').value = url; } function copyToClipboard() { var copyTarget = document.getElementById("result_area"); copyTarget.select(); document.execCommand("Copy"); } </script> </head> <body> <form name="form" id="params_form" action=""> <label><input type="radio" name="radio" id="radio1" value="line" checked="checked">LINE</label> <label><input type="radio" name="radio" id="radio2" value="facebook">Facebook</label> <label><input type="radio" name="radio" id="radio3" value="instagram">Instagram</label> <label><input type="radio" name="radio" id="radio4" value="twitter">Twitter</label> <label><input type="radio" name="radio" id="radio5" value="google">Google</label> <input name="url" id="url_form" type="text" value="" style="margin-top: 10px"> <input type="button" value="URL作成" onclick="onButtonClick();" style="margin-top: 10px"> </form> <input type="text" id="result_area" style="margin-top: 10px"> <button onclick="copyToClipboard()" style="margin-top: 10px">コピーする</button> </body> </html> |
上記コードはビジボットのサイトに埋め込むため、あえて1ファイルで作っているコードです。
HTMLの解説
まずは、HTML要素の<body>部分についてです。
ラジオボタンの部分および、URLを入力する<input>要素を全て<form>要素の中に入れて、URLを入力した後に押す<input type=”button”>ボタンを用意します。
この要素をクリックしたらonclick=”onButtonClick();関数が呼び出されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<body> <form name="form" id="params_form" action=""> <label><input type="radio" name="radio" id="radio1" value="line" checked="checked">LINE</label> <label><input type="radio" name="radio" id="radio2" value="facebook">Facebook</label> <label><input type="radio" name="radio" id="radio3" value="instagram">Instagram</label> <label><input type="radio" name="radio" id="radio4" value="twitter">Twitter</label> <label><input type="radio" name="radio" id="radio5" value="google">Google</label> <input name="url" id="url_form" type="text" value="" style="margin-top: 10px"> <input type="button" value="URL作成" onclick="onButtonClick();" style="margin-top: 10px"> </form> <input type="text" id="result_area" style="margin-top: 10px"> <button onclick="copyToClipboard()" style="margin-top: 10px">コピーする</button> </body> |
</form>のあとに、結果を出力するための<input>要素、id=”result_area”を追記します。
そして、その下に<button>要素でクリックしたらid=”result_area”にセットされている値をコピーcopyToClipboard();関数を入れて、呼び出します。
※あまり綺麗にかけてなくてすみません…
JavaScriptの解説
onButtonClick()関数が呼び出されたら、document.getElementByIdを使ってHTML側で使われている「id = “params_form”」を取得し、target.url.valueでHTMLのnameがurl（input name=”url”〜）のvalue（すなわち入力されたURL）を取得します。
同様に、ラジオボタンの要素も取得します。
次に、「var flg = url.indexOf(‘?’) > 0」で?が入っていた場合、-1という結果が出るためflgにはtrueまたはfalseがセットされます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<script> function onButtonClick() { var target = document.getElementById("params_form"); var url = target.url.value; // alert('url:' + url); // form要素を取得 var params = document.getElementById("params_form"); // form要素内のラジオボタングループ(name="radio")を取得 var radioList = params.radio; // 選択状態の値(value)を取得 var param = radioList.value; //alert('params:' + param); var flg = url.indexOf('?') > 0 // ?が入ってるかチェック //alert('flg:' + flg); if(flg === true){ url = url + '&utm_source=' + param; }else{ url = url + '?utm_source=' + param; } //alert(url); document.getElementById('result_area').value = url; } function copyToClipboard() { var copyTarget = document.getElementById("result_area"); copyTarget.select(); document.execCommand("Copy"); } </script> |
最後に、取得した結果を元にifでパラメータ分岐を作り、最終的なURLを生成します。「document.getElementById(‘result_area’).value = url;」の部分でHTML側の「id=”result_area”」に値を返します。
デバック方法
コードを書いていると、値が正しく取得できているか不安になります。私の場合は「alert(‘url:’ + url);」などを使って試してました。この場合入力された値をアラートでブラウザ上に表示しています。
実際には以下のように表示されて非常に簡単に確認することができました。
※用途によって様々なやり方がありますが、今回は記事に埋め込むためだったのでalertを使ってます。
