イイダリョウのブログ。【JS】フォームのinputタグにURLパラメータを渡す方法2018-07-09【JS】フォームのinputタグにURLパラメータを渡す方法JSURLの後ろにつらつらと続くパラメータ。あれを取得してフォームのinputタグに渡す方法をご紹介。やれることはわかってて前からやってみたいと思っていた内容なので、実際に作ってみました。クモのようにコツコツとURLパラメータとはなんぞやまずパラメータとはなんでしょう。URLの後ろに続いている文字列です。URLパラメータの形式//普通のURLhttp://ドメイン.com//パラメータ付URL(一つ)http://ドメイン.com?変数=値//パラメータ付URL(複数)http://ドメイン.com?変数=値&変数=値&変数=値&変数=値&変数=値URLのあとに?を付けて変数=値を書きます。複数のパラメータを付ける場合は二つ目以降は?が&になります。バナー広告のリンク先がこのようにパラメータがつらつらと入っていたりしますよね。あと、スパムメールのURLとかね。これらはURLに付属したい情報を追加しているわけです。見た目は基本的に上記の形式ですがパラメータは2種類あります。アクティブパラメータ:パラメータによってページの内容が変化するパッシブパラメータ:パラメータによってページの内容が変化しないアクティブパラメータアクティブパラメータの例として検索結果があります。変数qは検索を現し値がJSです。リンクをひらくと「JS」の検索結果が表示されます。https://www.google.co.jp/search?q=JS値をCSSに変更すると「CSS」の検索結果に変わります。https://www.google.co.jp/search?q=CSS?以降を全部削除すると検索設定が無効になって、TOPページにリダイレクトされました。https://www.google.co.jp/webhpパッシブパラメータパッシブパラメータは任意で自由でつけられます。あるページの後ろに?boowy=psycho(BOØWYは最高)という適当なパラメータを付けてもhttp://idr-zz.hatenablog.com/?boowy=psychoあるいは後ろに?koko=tokyodaze(ここは東京だぜ)というパラメータを付けたとしてもhttp://idr-zz.hatenablog.com/?koko=tokyodazeまたは?boowy=psycho&koko=tokyodaze(BOØWYは最高&ここは東京だぜ)と全部付けてもページの内容は変わりません。http://idr-zz.hatenablog.com/?boowy=psycho&koko=tokyodazeパラメータ付きのURLのパラメータをURLバー上で削除してみても表示内容が変わらないことが確認できるはずです。http://idr-zz.hatenablog.com/パラメータ付きURLのアクセスを計測さて、パッシブパラメータはページの内容に何も影響をおよぼしませんが、それではなんのためにパラメータを付けるのでしょうか?主に、計測が目的になります。ある特設ページがあり、問い合わせフォームへのリンクボタンが三つあったとします。class="ketsuron"><h2>結論タイトル結論タイトル結論タイトル</h2><p>大金持ちになれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれるぞぉーーーー!!。href="form.html?btn=003">今すぐ問い合わせる!!</a></aside></article>ページTOPのすぐ下の問い合わせボタンのリンク先にはパラメータ?btn=001説明の真ん中の問い合わせボタンのリンク先にはパラメータ?btn=002結論の後の問い合わせボタンのリンク先にはパラメータ?btn=003この3つのボタンのリンク先は基本的に同じ内容ですが、Googleアナリティクスのアクセス解析では違うページとしてカウントされます。そのため、どのボタンが一番多くクリックされたかがわかるわけです。この場合、001は切羽詰まってて、002は普通の人、003は慎重派ですねw他にこんな使い方もできます。複数のSNSにシェアするときに?sns=tw、?sns=fbなど異なるパラメータを付ける→どのSNSが一番アクセスが多いか計測できるメルマガ本文のリンクに?mail=20180101などのパラメータを付ける→メルマガからのアクセス数を計測できる複数のアフィリエイターに?afi_id=001、?afi_id=002などのID番号を付与する→どの紹介記事が一番アクセスが多いか計測できるURLを取得してフォームに送信さて、URLにパラメータを追加することで、アクセスまでは計測できました。我々の最終的なゴールはフォームの送信までですよね!もしこのパラメータ付URLをフォームの入力情報と一緒に送信できれば、フォーム送信まで到達したパラメータの数が計測できそうです。location.hrefでURLを取得するJSには、現在表示されているページのURLを取得する方法があります。location.hrefです。id="thisurl"></span>」です。url;変数urlにlocation.hrefを代入DOMthisurlの中身をinnerHTMLでurlに変更これでページのURLが表示されます。CodePen.上記の例では埋め込みコード用のパラメータ?type=embed&animations=runが追記されています。大元のリンク先はパラメータ無しのURLが表示されてます。※参考:https://codepen.io/i_ryo/pen/bjbqLxためしにURLにパラメータ?boowy=psychoを追加してみると※参考:https://codepen.io/i_ryo/pen/bjbqLx?boowy=psychoリンク先のページにもパラメータ(BOØWYは最高)が表示されます。フォームにURLを入れたいさて、URLを取得して画面に表示まではできました。次にこれをフォームの項目として入力したいですね。</form>一応URL欄は作ってみましたが、まさかユーザーにURLをいちいちコピペしてもらうわけにはいきません。CodePen.さきほどJSで取得したURLをここに渡せれば自動的に入力できそうです。valueプロパティにURLを渡すinputタグの入力値はvalue属性になります。nameのところに「イイダリョウ」と入力するとvalue属性の値にイイダリョウが入ります。このvalueに先ほどの変数urlを代入するとどうでしょうか。url;DOMのid#inputurlのvalueプロパティに変数urlを代入。CodePen.おお!やりました!URLが自動的に入力されました!これでURLを送信することができますね。パラメータのみを取得してフォームに送信さて、URLをinputタグに渡すことができましたが、ちょっと長いですよね。URLの部分は自明であって、本当に知りたいのはURLの後ろのパラメータのみです。location.searchでパラメータのみ取得したいはい、パラメータのみを取得するJSもありまぁす。id="thisparam"></span>」です。</P>今度はid#thisparamのspanタグにパラメータを表示しましょう。先ほどのURL取得とほとんど同じ書き方ですね。CodePen.パラメータ、表示されました!ちなみに元ページを見ると、埋め込み用のパラメータがないので空欄です。※参考:https://codepen.io/i_ryo/pen/rrBzabここに任意のパラメータ?boowy=psychoを追加すると...※参考:https://codepen.io/i_ryo/pen/rrBzab?boowy=psychoBOØWYは最高〜が表示されました!valueプロパティにパラメータを渡すさあ、URLと同様にinputのvalue属性にパラメータを渡しましょう。HTMLはこんなです。</dl>先ほどのURLとほとんど同じです。idは#inputparamにしています。次、JSはこんなです。param;DOMのid#inputparamのvalueプロパティに変数paramを代入。CodePen.おお!埋め込み用のパラメータ?type=embed&animations=runのみが表示されてますね!任意のパラメータ?boowy=psychoを追加したページはこちら※参考:https://codepen.io/i_ryo/pen/OwLjWz?boowy=psychoBOØWYは最高〜入りましたぁ!type="hidden"で非表示にさて、これでURLやパラメータがinput項目に入力できることがわかりました。この項目はユーザーにとっては見えなくてもいい、あくまで内部で計測するために必要な項目ですね。*2表示不要の項目はtype属性をhiddenにすると非表示にすることができます。CodePen.リンク先をデベロッパーツールなどで見ていただくと、非表示ながら#inputurlのvalue属性にURLが入っているのがわかります。※参考:https://codepen.io/i_ryo/pen/QBLMQzパラメータ?boowy=psycho付きはこちら。#inputparamのvalue属性に「BOØWYは最高〜」が入ります。※参考:https://codepen.io/i_ryo/pen/QBLMQz?boowy=psycho最後に:パラメータの限界さて、これでパラメータ付きのURLでフォームの送信まで計測することができましたが、この方法には限界があります。このページに訪れたユーザーがその場で問い合わせや注文をする場合はこれでいいのですが、普通はそんなに即決されることは少ないと思います。この日は認知だけで終わって、検討の結果、後日また訪れてポチった場合、もしこのときURLにパラメータがないと計測ができません。即日でもサイト内を回遊してフォームに再訪したときにはもうパラメータはありません。対策としてはパラメータ付きで訪れたユーザー情報をCookieで記録し、紐づける必要があります。Cookieは最近好まれない風潮ですが、これに変わる技術として、JSでローカル環境のみで完結するローカルストレージという技術も産まれました。ここらへんについてはまた改めて触れていきたいと思います。※参考:ネイティブJSやってみたシリーズqiita.com*1:フォームを送信するには別途PHPファイルの送信プログラムが必要です。varとletとconst(再代入、再宣言の挙動の違い)ES2015から新しく加わった変数letとconst。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。