目次
JavaScriptでURLを表すlocationオブジェクト
URLとそのパーツはJavaScriptの変数として取得できる。タグマネージャなどでJavaScriptの変数を使ってURL（の一部）を指定する場合や、直接Javascriptを書いてURLを指定する場合にこれらを使うことがある。
| 変数名 | 意味 | 例 |
|---|---|---|
window.location.href |
URL全体 | https://example.com/audio/detail.php?id=123#rev |
window.location.protocol |
プロトコル | https: |
window.location.hostname |
ホスト名 | example.com |
window.location.port |
ポート番号 | 443 |
window.location.pathname |
パス名 | /audio/detail.php |
window.location.search |
クエリ文字列 | ?id=123 |
window.location.hash |
ハッシュ | #rev |
(「window.」は省略可)
たとえば
if (location.hostname.indexOf('example.com') > -1 && /^\/list/.test(location.pathname)) {
// マッチしたときの処理。以下は外部スクリプトファイルを読み込む例
var t = document.createElement('script'); t.async = true; t.src = '//js/lib.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
}
location.hostname.indexOf('example.com') > -1でホスト名に「example.com」を含み、/\/detail\.html$/.test(location.pathname)でパス名が「/detail.html」で終わる
URLを指定している。
URLを特定する
リマーケティングリストの定義の際などでURLを指定するが、URLの指定の仕方にはいろいろ方法がある。
パターンマッチの種類
指定した文字列に一致させる（パターンマッチ）ことで特定するが、その文字列の一致のさせ方にはいくつかの種類がある。
完全一致
URLのプロトコルからクエリ文字列まで、文字列全部が一致するパターンを完全一致という。「1URL＝1コンテンツ」が徹底されているのでなければ完全一致でURLを指定することは難しい（漏れが生じる）
部分一致
一部にその文字列を含むパターンを部分一致という。部分一致の中で、検索対象の文字列の先頭に該当するパターンを前方一致、末尾に該当するパターンを後方一致といい、単純な部分一致より限定された条件での指定ができる。クエリ文字列の問題があるため後方一致はあまり使うことがない。
正規表現マッチ
正規表現を使って複雑なさまざまな条件で指定することができる。ただ技術的に難しく、漏れや抜けが発生することも多い。何でもできるが、実装するにはコストがかかる。特定の複数のカテゴリ（関東の都県だけ）や、特定の商品ID範囲（1000~3999）のみ指定する場合などでは正規表現を使うことになる。
条件の絞込み、AND / OR
複数の条件をANDやORで結合できる。ANDやORで結合する範囲がどこなのか注意する必要があり、条件が複雑になるとパズルになりやすい。
ホスト名／パス名を指定する
URL全体だとクエリ文字列込みでの比較となるため、考慮すべきことが多くなる。完全一致のようにできるだけ細かくページの設定をしたいが、http/httpsの違いやダミーパラメータの違いは無視したいケースなどに対応しにくい。
そういう場合はURLのホスト名とパス名を抜き出して、そこだけで指定をする。
ホスト名・部分一致「example.com」
AND
パス名・部分一致「/audio/list.php」
で、
- http://example.com/audio/list.php
- https://example.com/audio/list.php
- http://www.example.com/audio/list.php
- https://www.example.com/audio/list.php
- http://www.example.com/audio/list.php?page=2&sort_by=price
:
などにマッチする。URL全体を指定するのに比べて条件指定が楽になる。ただしURLのみでの指定だと入力項目が1か所で済むが、ホスト名やパス名での指定だと2か所になる面倒なところはある。
参考
https://www.ayudante.jp/column/2014-05-13/11-55/
例題「特定のディレクトリトップのみ指定」
- httpとhttps両対応
- wwwの有無でも同じ
- クエリ文字列は何であってもよい（ダミーパラメータ対応）
- index.phpにも省略形にも対応
- 下層は含まない
という条件で
https://www.example.com/movie/
と同じページに該当するURLを
- ホスト名／パス名での指定
- 正規表現での指定
で指定してみよう。
ホスト名／パス名の場合
ホスト名・部分一致「example.com/」
AND
パス名・完全一致「/movie/」
OR
パス名・完全一致「/movie/index.php」
※階層指定の場合は下層を除外するテクニックもある
正規表現の場合
https?://(www\.)?example\.com/movie/(index\.\w+)?(\?.*)?$
（参考）正規表現
いろいろなパターンの文字列をまとめて指定するもの
正規表現の使い道
正規表現を使う処理には
- マッチするかどうか判定（match）
- マッチした部分の抽出（extract）: URLからディレクトリ名の抽出などに使う
- 置換（replace）
がある。どんなプログラミング言語でもSQLでもBIツールでもこの3種類の処理は備わっている。
レベル別正規表現
正規表現の学習の詳細は他の教材に任せるが、学ぶ際のコツとして難易度
レベル1: 特殊文字：1文字を表すもの
.何でも1文字^行頭$行末\n: ラインフィード（LF）\r: キャリッジリターン（CR）
レベル1: 特定の種類の文字を表すもの
\d: 任意の数字\w: 任意の英数字かアンダースコア_\s: 空白文字（ホワイトスペース、タブ、改行文字）
\Dなどの大文字は否定（数字以外の文字）を表す
レベル1: 文字クラス
[abc]:abcのいずれか1文字[0-9]は\dと同じ
エスケープ（その文字の前にバックスラッシュを付ければいい）するのは^-]\の4文字だけ。それ以外は不要
否定
[^abc]: abc以外の任意の1文字
レベル2: グループ
(tokyo|fukuoka|kagoshima)
- どれか
- マッチした部分の抽出で使う
- 正規表現全体を抽出する場合もあれば
- 一部を指定して抽出することもある。その「一部」を複数個設定することも可能
レベル2: 量指定子
+直前に指定した文字1文字以上で最長マッチ（\d+で数字列）*直前に指定した文字0文字以上で最長マッチ（直前に指定した文字があってもなくてもいい、\d*は数字がなくてもマッチする）
\d*は「12」にも「ab」にもマッチするため、こういう使い方はしない。
\d+（任意の数字列）または.*（何にでもマッチする→正規表現抽出で使う）のように使う。
これらは最長マッチ。最短マッチにするには?を付ける
レベル3: 最長マッチと最短マッチ
任意の正規表現に?を付けると最短マッチになる
<abc>123>
<.*>だと<abc>123>にマッチする<.*?>だと<abc>にマッチする
レベル4: 否定先読みなど
特定の文字列を含まない条件
URLパラメータとHTTPメソッド
ブラウザからサーバのプログラムに対してデータを送る必要がある際、通信の仕方に大きく2種類ある。
GET
リクエスト時に、データをURL内のパラメータとしてもたせるもの。これまでの話はすべてGETのもの。
使うケース
- パラメータの数が少ないとき、パラメータの値の文字列が短いとき
- パラメータによって表示内容を出し分けたいとき（URLとコンテンツを対応させたいとき）
URLを見ればパラメータの内容、つまり送信したデータがすべてわかってしまうので、秘匿性の高いデータを送るには不適。
POST
パラメータをURLに含めず、違うやり方でサーバに送るもの。
使うケース
- パラメータの数が多い場合、パラメータの値の文字列が長いとき
- サーバに対して情報を送ることが主目的（送った情報に対してどんなコンテンツが表示されるかは意識しない）
- 送るデータの内容を人の目から隠したいとき（httpsであれば完全に秘匿可能）
広告運用とテクノロジー の記事一覧
