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

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

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

JavaScript
HTML
３つの実用例

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 に遷移します。

３つの実用例

プロモーションキャンペーン
この手法は、一度だけユーザーを特定のプロモーションページに誘導したい場合に便利です。例えば、ユーザーがあるリンクを初めてクリックすると、プロモーションページが新しいタブで開きます。その後、同じリンクをクリックすると、通常の遷移先にリダイレクトします。これにより、ユーザーに一度だけ特定のキャンペーンを見せることができます。
初回ログイン時のチュートリアルページ
ウェブサイトやアプリで、ユーザーが初めてログインした際にチュートリアルやガイドページに誘導するためにもこの技術は使えます。初めてのログイン時に限り、特定のリンクをクリックするとチュートリアルページが新しいタブで開き、2回目からは通常のページに遷移します。
ユーザー調査やフィードバックの収集
特定のユーザーに対して一度だけフィードバックを求めるアンケートページに誘導するためにもこの技術を使用することができます。ユーザーがリンクを初めてクリックすると、アンケートフォームが新しいタブで開きます。その後、同じリンクをクリックすると通常の遷移先にリダイレクトします。この方法で、ユーザーからのフィードバックを効率的に収集することが可能となります。