JavaScriptを使用して一つのリンクから異なる遷移を設定する方法

ここをクリックをクリックすると、1回目はYAHOO!ニュース(https://news.yahoo.co.jp/)が別ウィンドウが開きます。

2回目以降は当ブログのトップページに遷移します。

JavaScript

const myLink = document.getElementById('myLink');

myLink.addEventListener('click', function(event) {
  event.preventDefault();
  window.open('https://2.example.com', '_blank');
}, { once: true });

HTML

<a href="https://example.com" id="myLink">ここをクリック</a>

ここで使用している window.open() 関数は新たにブラウザのタブまたはウィンドウを開きます。’_blank’ というパラメータは新規タブを開くことを指定します。

{ once: true } の部分は、このイベントリスナーが一度だけ発火することを指定します。したがって、リンクを一度クリックした後は、再度クリックすると元のリンク https://example.com に遷移します。

3つの実用例

  1.  プロモーションキャンペーン
    この手法は、一度だけユーザーを特定のプロモーションページに誘導したい場合に便利です。例えば、ユーザーがあるリンクを初めてクリックすると、プロモーションページが新しいタブで開きます。その後、同じリンクをクリックすると、通常の遷移先にリダイレクトします。これにより、ユーザーに一度だけ特定のキャンペーンを見せることができます。

  2.  初回ログイン時のチュートリアルページ
    ウェブサイトやアプリで、ユーザーが初めてログインした際にチュートリアルやガイドページに誘導するためにもこの技術は使えます。初めてのログイン時に限り、特定のリンクをクリックするとチュートリアルページが新しいタブで開き、2回目からは通常のページに遷移します。

  3.  ユーザー調査やフィードバックの収集
    特定のユーザーに対して一度だけフィードバックを求めるアンケートページに誘導するためにもこの技術を使用することができます。ユーザーがリンクを初めてクリックすると、アンケートフォームが新しいタブで開きます。その後、同じリンクをクリックすると通常の遷移先にリダイレクトします。この方法で、ユーザーからのフィードバックを効率的に収集することが可能となります。

ユーザーに嫌われるやり方なので、おすすめはできません。

YouTubeのチャンネル登録はこちら!!
( *ˊᵕˋ)σ 凸ポチッと応援よろしくね!!
開発・運営ランキング にほんブログ村 IT技術ブログ IT技術情報へ
記事を書いてる人
病根のバグ

ガラケー時代からWEB開発やってるバツイチ自宅SEです。不眠不休で働くので、ブログのブックマークとYouTubeのチャンネル登録とXのフォローお願いします。デスマ上等!!

「○○を知りたい!!」「○○が分からない!!」などありましたら、Twitterでもブログでもコメントいただければ、ご期待に添えるように頑張ります!

病根のバグのSNSを覗く!!
JavaScript
病根のバグのSNSを覗く!!
ITkagyo

コメント

タイトルとURLをコピーしました