BAsixs(ベーシックス)

「あたりまえ」をアップデートしつづける

サイトの効果測定や表示の切り替えに便利なURLパラメータの使い方

読了目安 : 6

  • 投稿日 :
  • 最終更新日 :

この記事を書いた人

プロフィールアイコン(イラスト):フロントエンドエンジニア 櫻井 和貴
櫻井 和貴フロントエンドエンジニア(ビジネス・アーキテクツ)

フロントエンド周りの制作、開発の業務を中心にBtoC向けWebサービスを行う会社で10年ほど勤務したのち、医療系ベンチャー、Web広告系企業に所属。開発以外にも技術選定や計測ツールの検証などにも関わってきた。2021年にBAに入社し今に至る。

近年はBtoBでも、ユーザーとのコミュニケーションやサイトへの送客のひとつの手段として、SNSを活用する企業が増えています。ユーザー層に合わせて複数のSNSを使い分けたり、複数アカウントを運用する場合もありますが、どのSNSからの流入が多いか把握できていますか。

ブログやECサイトで特定の条件で絞り込んだページを表示したり、Googleアナリティクスを使って、流入経路の特定や成果の可視化に活かすなど、すぐに設定できると便利だと思いませんか?

これらはURLパラメータの仕組みを理解できれば誰でも簡単に設定ができます。

この記事ではURLパラメータの基本的な話から、使われ方、実際の体験談などを含めてご紹介します。

流入経路の特定や効果測定などの「事実に基づいたマーケティング施策」を実現したい方は、お気軽にご相談ください。

ビジネス・アーキテクツはWeb黎明期から20年以上も積み重ねてきた知見に加え、戦略立案からサービス設計・構築、プロジェクト運営まで、Webに関する全工程を一気通貫で提供しています。これまで蓄積した経験をふまえて、貴社の課題にあった解決方法を提案いたします。

サイトの効果測定や表示の切り替えに便利なURLパラメータの使い方

URLパラメータとは「?」の右側

URLに「?」が入ってるものを見た事はあるでしょうか?もし見覚えがない場合は一度URLに注目してWebサイトを見るようにしてみてください。

https://www.google.com/search?q=basixs

簡単に言うとこの「?」を境目として左側がURL、右側がパラメータです。
ちなみに、「?」が2つ以上あるものはURLとして間違っている可能性が高いです。

パラメータには「=」を使います。「パラメータ名=値」という形です。この固まりを1つのセットと考えておくと大体の理解はできると思います。

https://www.google.com/search?q=basixs」の場合、パラメータ名が「q」、パラメータ値が「basixs」、URLは「https://www.google.com/search」となります。簡単にいうと「basixs」というキーワードを検索しています。

URLパラメータの設定例

では実際にGoogleで検索しながら確認をしてみます。(キャプチャしてる画像はMac GoogleChromeのものです)

検索窓に「https://www.google.com/search?q=Basixs」を入れると、「BAsixs」と検索した時と同じ結果が表示されます。

次に「https://www.google.com/search?q=Basixs」の「BAsixs」の部分を「WordPress」に変えてURLにアクセスすると、下のような結果になるかと思います。

「https://www.google.com/search?q=WordPress」の検索結果画面

画面がWordPressを検索した結果になりました。Googleでは「q」と言うパラメータ名にキーワードを設定すれば、検索の結果が返ってくる仕様のようです。さてパラメータが複数あるケースも考えてみます。

先程の検索結果から試しにツールを選んで、検索期間を1週間以内に選択してみます。

「https://www.google.com/search?q=WordPress」に、「検索期間を1週間以内に選択」の条件を付けた検索結果画面

検索結果は1週間以内で更新されたものが返ってきますが、ここではURLに注目してください。

何やら随分URLが長くなりましたが、先程の[「q=WordPress」の右に「&」の文字があります。さらにURLをよく見ると、「&」や「=」の文字がいくつかありますね。項目が複数ある場合は、「&」で追加していきます。

?パラメータ名1=&パラメータ名2=&パラメータ名3=値…….

という具合に、複数の項目を追加します。

細かい一つ一つの項目の意味は分かりませんが、WordPressで1週間以内という条件の検索に必要なものは以下の書き方で検索できます。

https://www.google.com/search?q=WordPress&tbs=qdr:w

URLパラメータは以下の3つの使い方が理解できれば大丈夫です。

押さえておきたいURLパラメータの使い方

  • ? : URLとパラメータの境目
  • = : パラメータ名と値を紐付けているもの
  • & : パラメータが複数ある時に繋ぎ合わせるもの

次に、URLパラメータの使い方を説明します。まず、URLパラメータは2種類あります。

URLパラメータは2種類ある

URLパラメータは

  • アクティブパラメータ:システム処理をする
  • パッシブパラメータ:計測・分析する

の2種類があります。

それぞれについて説明します。

1.システムの処理をするためにURLパラメータを使う

1つ目はアクティブパラメータです。パラメータの値を使ってシステムの処理をするためにパラメータを使います。

パラメータの値を元に情報取得や表示の切り替えなどもできるため、ブログやECサイトでカテゴリで絞り込むときにも使われます。

例えば、先ほど例に挙げたGoogleの検索に使われます。「https://www.google.com/search?q=WordPress」の「q=WordPress」は検索キーワードです。

同様にAmazonで「USB」とサイト内検索すると、URLパラメータ「k=USB」が付与され、「https://www.amazon.co.jp/s?k=USB」に切り替わり、USB商品のみ表示されます。

また、「文房具・オフィス用品」カテゴリを選択すると、「https://www.amazon.co.jp/s?i=office-products」に切り替わり、文房具・オフィス用品のみ表示されます。

アクティブパラメータはデータベースなどと絡むため、エンジニアが取り扱うケースが多い印象です。

2.計測・分析をするためにURLパラメータを使う

2つ目はパッシブパラメータです。計測や分析などのためにパラメータを使います。

マーケティング寄りの職種の人やアナリスト関連の方が関わることが多いのではないでしょうか。私がマーケティング系の部署で働いていた時は、流入経路の特定やドメインの違う遷移先でのコンバージョン計測などを行う際に役立ちました。

実際に使っていた事例を3つ紹介します。

例1.LINEとFacebookで広告を出稿して成果を比較する

広告から流入するWebサイトのページURLが「https://www.xxx.com」の場合、

LINE広告:https://www.xxx.com?sns=line
Facebook広告:https://www.xxx.com?sns=fb

とパラメータを設定します。

「sns」というパラメータを使い、LINEから流入したユーザーか、Facebookから流入したユーザーかを判別するために、広告の設置してあるサイトから自社サイトへのリンクURLを設定しています。

「?sns=line」「?sns=facebook」という流入元メディアが分かるパラメータを設定しておくことで、どのSNSから自社サイトに流入したユーザーがコンバージョンに至る割合が多いか、などの分析に使うことができます。

限りある広告出稿費用をFacebook広告に重点的にかけるべきか、LINE広告にかけるべきかを判断する基準になりえます。

例2.Slackからの流入の効果を計測する

パラメータを使うことで、流入経路の効果測定もできます。メールやSlackなどWebサイト以外からの流入を分析する際にも有効です。

例えばSlackに投稿するURLは以下のようなパラメータをつけて計測に使っています。

?from_slack=20220302

例3.SNS広告 → Web制作会社管理内のサイト → お客様ドメインのサイト

Web制作会社(Web広告代理店)ドメインのサイトではSNSの流入元が分かりますが、お客様ドメインのサイトでは計測できないというケースもあります。

設定をする理由は、Web制作会社管理内のサイトとお客様サイトのドメインが違うためです。

Web制作会社でパラメータ引き回しの処理をしないと、遷移先のお客様ドメインのページで「FBやLNEの広告からそれぞれ何件遷移したか?コンバージョンに貢献したか?」といった詳細を計測できず、ざっくりとした分析しかできないからです。

この場合、解決するためにはSNS広告から受け取ったパラメータを、お客様ドメインのサイトURLに付与したパラメータを引き回す処理を、Web制作会社管理内のサイトでJavaScriptを使って行いました。

SNS広告 → 自社管理内のサイト → お客様ドメインのサイトの場合、JavaScriptでパラメータを取得し、リンク先のLPのURLにセットする

上記の画像では、パラメータを引き回す処理の流れを説明しています。

LINE広告の場合、Web制作会社管理内のサイト(https://www.xxx.com)で以下の流れでパラメータを引き回します。

  1. LINE広告に設定したパラメータ付きURL「https://www.xxx.com?sns=line」を叩いて遷移してきたユーザーのURLからパラメータを取得する
  2. パラメータ「?sns=line」を取得する
  3. お客様ドメインのサイトURL(https://www.client.com)に、取得したパラメータ「?sns=line」を設定する
  4. 連結したURL「https://www.client.com?sns=line」に移動し、ページを表示する

上記の3で、お客様ドメインのサイトURLが「https://www.aaa.com/?param=test」のように、あらかじめ別のパラメータが付いているURLにパラメータを引き回す場合は

https://www.aaa.com/?param=test

https://www.aaa.com/?param=test&sns=line

というように、複数のパラメータを繋げる「&」を使って、パラメータを設定します。

Googleアナリティクスでパラメータを活用して集計する方法

先ほど紹介したSlackのパラメータを使ってGoogleアナリティクス(ユニバーサルアナリティクス)で活用する方法をご紹介します。
Googleアナリティクス(ユニバーサルアナリティクス)の画面で

「行動」→「サイトコンテンツ」→「すべてのページ」を選択します。

アドバンスという文字の左側の入力エリアに計測対象のURLを入れて虫眼鏡ボタンを押します。

Googleアナリティクスのページ列に「/internal-tools/?from_slack=20220302」「/internal-tools/?from_slack=20220406」などが並ぶ

上の画像では「from_slack」という値に、slackに投稿した時の日付を設定しています。

「/internal-tools/?from_slack=20220302」「/internal-tools/?from_slack=20220406」など、パラメータを設定することで、投稿した日ごとの効果の計測ができます。

パラメータを間違えてしまい、計測が出来なかった失敗談

計測用のパラメータの書き方が間違っていても、サイトがエラーを起こしたり表示が崩れたりしないので、計測に失敗したことに気づきにくいです。

また、担当者間の引き継ぎがうまくできていなかったり、担当者があまりWebの仕組みに明るくなくてパラメータの記述を間違えて進めてしまった結果、事故が起きるということもありました。

これらに共通して言えることは「計測できているかの確認をしっかりすれば防げること」でした。計測されているかの確認も定期的に行うことが必須です。

サイトの更新があった時など、マーケターとサイト更新をするエンジニアやデザイナーとの共有が、しっかりできていないことで起こる事故もありました。

例えば、計測にHTMLタグ内のclassを使っていることが周知されていなかったため、そのclassを消してしまって計測ができなくなってしまったという事故がありました。組織内で情報の共有ができていなくて、必然的に起こる種類の事故だったと思います。

サイトやシステムが普通に稼働していても計測ができていないと、それまでの成果が0になってしまうので、大きな問題と組織で捉えて取り組む必要があります。

まとめ:URLパラメータの仕組みをしっかり理解し、有効に活用しよう

パラメータの仕組みを理解できると、システムの仕組みも見えて来ます。また計測を意識した開発、設計にもつながり、計測や成果に対して出来ることの幅が広がると思います。

記事で紹介したGoogleアナリティクスに関してですが、設定は複雑で、内容が正しいかの確認は大変な面もあります。

現在のGoogleアナリティクス(UniversalAnalytics)は2023年7月にサポートが終了される予定です。最新バージョンのGoogleアナリティクス4でもURLパラメータを使った計測ができます。

ビジネス・アーキテクツは、URLパラメータの仕組みをしっかり理解し、運用面を考慮した設計・設定が可能です。Googleアナリティクスを使い、より詳細な効果測定を実現したい方はご相談ください。

クライアント先や社内で培った経験やノウハウを活かし、貴社に合ったよりよい方法をご提案します。