Googleアナリティクスのパラメータ生成ツール

ビジネス

便利なGASレシピ集!に戻る場合は以下から

便利なGASレシピ集! – [2020年最新版]

2019年5月22日

はじめに

どうも、ビジボットです。今回はGAS!ではなくJS(JavaScript)を使って

JS(JavaScript)を使ってGoogleAnalytics(グーグルアナリティクス)などで指定するutm_sourceのパラメータを選択してURLを生成するコードを作ってみました。実コードを記事に埋め込んでいます!
さらに、生成したコードをワンクリックでコピーができる設計なので、携帯でも簡単にコピペができます。

パラメータ生成ツール

完成イメージです。
実際に操作できるのでお試しください。

実際のコード

上記コードはビジボットのサイトに埋め込むため、あえて1ファイルで作っているコードです。

HTMLの解説

まずは、HTML要素の<body>部分についてです。

ラジオボタンの部分および、URLを入力する<input>要素を全て<form>要素の中に入れて、URLを入力した後に押す<input type=”button”>ボタンを用意します。
この要素をクリックしたらonclick=”onButtonClick();関数が呼び出されます。

</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がセットされます。

最後に、取得した結果を元にifでパラメータ分岐を作り、最終的なURLを生成します。「document.getElementById(‘result_area’).value = url;」の部分でHTML側の「id=”result_area”」に値を返します。

デバック方法

コードを書いていると、値が正しく取得できているか不安になります。私の場合は「alert(‘url:’ + url);」などを使って試してました。この場合入力された値をアラートでブラウザ上に表示しています。

safariのalert

実際には以下のように表示されて非常に簡単に確認することができました。
※用途によって様々なやり方がありますが、今回は記事に埋め込むためだったのでalertを使ってます。