読者です 読者をやめる 読者になる 読者になる

Debriefing [デブリーフィング] | Web関連・恋愛・ライフハックを発信するブログメディア。

都内で働く20代Web系男子が運営するブログメディア。Web関連、恋愛、仕事、ライフハック、などについて情報を発信していきます。

うまく遷移しない!?パラメーター付きアンカーリンクの正しい書き方

リンクしない!?パラメーター付きアンカーリンクの正しい書き方

GoogleAnalyticsなどを使ってアクセス解析をしたい時に、URLにパラメーターを付けたい時があります。しかしWebサイトによってはアンカーリンクで遷移させたいときに、パラメーターがついたURLだと、うまくリンクしないときがあります。

今回はパラメーター付きアンカーリンクの正しい書き方を説明します。

パラメーターとは

URLの後ろに?から始まる文字列の部分がパラメーターです。

http://www.example.com/?utm_source=adsite&utm_campaign=adcampaign&utm_term=adkeyword

アンカーリンクでリンクさせたい時

Webサイトによっては、リンク先のページがランディングページのような、縦に長いページの場合、そのページの特定の場所へリンク(アンカーリンク)させたい時がありますよね。

下のサイトイメージ図でいうと、お問い合わせの部分にリンクさせたいとします。

リンクしない!?パラメーター付きアンカーリンクの正しい書き方

その時にパラメーター付き&アンカーリンクをそのままaタグのhrefに記述すると、うまくリンクできません。

まずは間違ったリンクの書き方を説明します。

間違ったパラメーター付きアンカーリンクの書き方

例えばお問い合わせの部分を囲っているdivに指定しているidが、#contactだと仮定して、普通に記述するとこんな感じに書くと思います。

<a href="http://www.example.com/#contact?utm_source=adsite&utm_campaign=adcampaign&utm_term=adkeyword">お問い合わせはこちら</a>

上記のようにパラメーターの前にアンカーリンク(#contact)を記述すると、うまく特定の場所にリンクしてくれません。

それでは正しいリンクの書き方を説明します。

正しいパラメーター付きアンカーリンクの書き方

<a href="http://www.example.com/?utm_source=adsite&utm_campaign=adcampaign&utm_term=adkeyword#contact">お問い合わせはこちら</a>

上記のようにパラメーターの後にアンカーリンクを記述すれば、うまく特定の場所へリンクさせることができます。

広告を非表示にする