JavaScriptでリンクを新しいタブ/ウィンドウで開いたことを検知する方法

はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptの基本的な知識があるWeb開発者を対象としています。特に、ユーザーのインタラクションを追跡する必要がある方や、広告クリックの効果測定を行いたい方に役立つ内容です。この記事を読むことで、JavaScriptを使用してユーザーがリンクを新しいタブまたはウィンドウで開いたことを検知する方法を理解し、実際のプロジェクトに応用できるようになります。また、この技術を活用してユーザーの行動分析を向上させる方法についても学べます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 前提となる知識1: JavaScriptの基本的な文法とイベント処理の理解 前提となる知識2: HTMLの基本的な構造とaタグの使い方

新しいタブ/ウィンドウでのクリック検知の必要性

Web開発において、ユーザーがリンクをどのように開いたかを把握することは、多くの場合重要です。特に広告のクリック追跡やユーザーの行動分析では、タブの開き方によってコンバージョン率が異なる場合があります。通常のクリックと新しいタブ/ウィンドウでのクリックを区別することで、より正確なデータ収集が可能になります。

また、ユーザー体験の観点からも、新しいタブで開かれたリンクに対して異なるフィードバックを提供したい場合があります。例えば、新しいタブで開かれたリンクについては、開かれたことを示す通知を表示したり、後で参照するためのブックマーク機能を提案したりすることが考えられます。

このようなニーズに対応するため、JavaScriptを使ってリンクの開き方を検知する技術は非常に有用です。次のセクションでは、具体的な実装方法について詳しく解説します。

JavaScriptで新しいタブ/ウィンドウ開きを検知する実装方法

イベントリスナーの基本設定

まず、リンクにイベントリスナーを設定する基本的な方法から見ていきましょう。JavaScriptでは、addEventListenerメソッドを使用してクリックイベントを監視できます。

document.addEventListener('click', function(event) {
  // クリックイベントの処理
});

この基本的なコードでは、ページ内のどこかがクリックされるたびに処理が実行されます。しかし、これだけではどのリンクがクリックされたか、また新しいタブ/ウィンドウで開かれたかを特定できません。

リンク要素の特定と開き方の検知

リンク要素を特定し、その開き方を検知するには、以下のようなコードを使用します。

document.addEventListener('click', function(event) {
  // クリックされた要素がリンクかどうかを確認
  const clickedElement = event.target.closest('a');

  if (clickedElement) {
    // 新しいタブ/ウィンドウで開かれたかどうかを判定
    const isNewTab = event.ctrlKey || event.metaKey || 
                     event.button === 1 || event.shiftKey;

    if (isNewTab) {
      console.log('新しいタブ/ウィンドウで開かれました:', clickedElement.href);
      // ここに新しいタブ/ウィンドウで開かれた場合の処理を記述
    } else {
      console.log('同じタブで開かれました:', clickedElement.href);
      // ここに同じタブで開かれた場合の処理を記述
    }
  }
});

このコードでは、event.ctrlKeyまたはevent.metaKey(Macの場合)が押されているか、event.buttonが1（中クリック）であるか、event.shiftKeyが押されているかをチェックしています。これらの条件のいずれかが真の場合、新しいタブ/ウィンドウで開かれたと判断します。

window.openを使った方法

リンクをプログラムaticallyに開く場合、window.openメソッドを使用することがあります。この場合も、開かれたウィンドウに関する情報を取得できます。

function openInNewTab(url) {
  const newWindow = window.open(url, '_blank');

  if (newWindow) {
    console.log('新しいタブ/ウィンドウで正常に開かれました');
    // 新しいウィンドウが開かれた後の処理
  } else {
    console.log('ポップアップがブロックされました');
    // ポップアップがブロックされた場合の処理
  }
}

// 使用例
document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault();
  openInNewTab(this.href);
});

この方法では、window.openが新しいウィンドウオブジェクトを返すかどうかで、ウィンドウが正常に開かれたかを判定できます。ただし、多くのブラウザではポップアップブロッカーが有効になっているため、必ずしも新しいウィンドウが開かれるとは限らない点に注意が必要です。

beforeunloadイベントを活用した方法

ページがアンロードされる前に何か処理を実行したい場合、beforeunloadイベントを使用できます。これにより、ユーザーがリンクをクリックしてページを離れる前に、特定の処理を実行できます。

window.addEventListener('beforeunload', function(event) {
  // ページがアンロードされる前の処理
  console.log('ページを離れます');

  // Chromeなどの一部のブラウザでは、イベントオブジェクトに returnValue を設定する必要がある
  event.preventDefault();
  event.returnValue = '';
});

完装例：クリック追跡システム

上記の技術を組み合わせた具体的な実装例を見てみましょう。ここでは、リンクのクリックを追跡するシステムを構築します。

// クリック追跡システム
class ClickTracker {
  constructor() {
    this.init();
  }

  init() {
    document.addEventListener('click', this.handleClick.bind(this));
  }

  handleClick(event) {
    const clickedElement = event.target.closest('a');

    if (clickedElement) {
      // リンクの情報を収集
      const linkInfo = {
        url: clickedElement.href,
        text: clickedElement.textContent,
        isNewTab: this.isNewTabOpen(event),
        timestamp: new Date().toISOString()
      };

      // 追跡データを送信
      this.trackClick(linkInfo);
    }
  }

  isNewTabOpen(event) {
    return event.ctrlKey || event.metaKey || 
           event.button === 1 || event.shiftKey;
  }

  trackClick(linkInfo) {
    // 実際のアプリケーションでは、ここでサーバーにデータを送信する
    console.log('クリックを追跡:', linkInfo);

    // 例: Google Analyticsへの送信
    if (typeof gtag !== 'undefined') {
      gtag('event', 'click', {
        'event_category': 'link',
        'event_label': linkInfo.url,
        'value': linkInfo.isNewTab ? 'new_tab' : 'same_tab'
      });
    }
  }
}

// 初期化
document.addEventListener('DOMContentLoaded', function() {
  new ClickTracker();
});

この実装例では、クリックされたリンクの情報を収集し、その開き方（新しいタブか同じタブか）を判定しています。そして、追跡データをコンソールに出力し、Google Analyticsへの送信も行っています。実際のアプリケーションでは、追跡データをサーバーに送信して分析を行うことが一般的です。

ブラウザ間の互換性について

異なるブラウザでは、イベントの動作やプロパティが異なる場合があります。特に、新しいタブ/ウィンドウの検出においては、ブラウザ間の差異を考慮する必要があります。

以下は、主要なブラウザでの動作の違いです：

1. Chrome/Firefox/Edge: - event.ctrlKeyまたはevent.metaKey(Mac)が押されていると新しいタブで開かれる - 中クリック（ボタン1）でも新しいタブで開かれる - shiftKeyとクリックを組み合わせても新しいタブで開かれる

2. Safari: - 基本的には他のブラウザと同様だが、一部のジェスチャーが異なる場合がある - トラックパッドでのジェスチャー（3本指でタップなど）でも新しいタブで開かれることがある

これらの差異を考慮するために、複数の条件を組み合わせて判定するのが一般的です。先に示した実装例では、主要なブラウザで動作するように複数の条件をチェックしています。

ハマりやすいポイントと解決策

ポイント1: イベント伝播の問題

イベントリスナーを設定する際、イベントの伝播（バブリング）の問題に直面することがあります。特に、親子関係のある要素にイベントリスナーを設定する場合です。

問題例:

document.getElementById('parent').addEventListener('click', function() {
  console.log('親要素がクリックされました');
});

document.getElementById('child').addEventListener('click', function(event) {
  console.log('子要素がクリックされました');
  // event.stopPropagation(); が呼び出されていない場合
});

この場合、子要素がクリックされると、親要素のクリックイベントも実行されてしまいます。

解決策:

document.getElementById('child').addEventListener('click', function(event) {
  console.log('子要素がクリックされました');
  event.stopPropagation(); // イベントの伝播を停止
});

event.stopPropagation()を呼び出すことで、イベントの伝播を停止できます。

ポイント2: 外部リンクと内部リンクの区別

外部リンクと内部リンクで異なる処理を行いたい場合があります。この区別は、URLのドメインを比較することで行えます。

実装例:

function isExternalUrl(url) {
  const domain = new URL(url).hostname;
  return domain !== window.location.hostname;
}

document.addEventListener('click', function(event) {
  const clickedElement = event.target.closest('a');

  if (clickedElement) {
    const url = clickedElement.href;

    if (isExternalUrl(url)) {
      console.log('外部リンクがクリックされました:', url);
      // 外部リンクの処理
    } else {
      console.log('内部リンクがクリックされました:', url);
      // 内部リンクの処理
    }
  }
});

ポイント3: ポップアップブロッカーへの対応

window.openを使用して新しいウィンドウを開く場合、ポップアップブロッカーによってブロックされることがあります。これを回避するには、ユーザーの明示的なアクション（ボタンのクリックなど）からwindow.openを呼び出す必要があります。

問題例:

// ページ読み込み直後に呼び出すとブロックされる可能性が高い
window.open('https://example.com', '_blank');

解決策:

document.getElementById('openButton').addEventListener('click', function() {
  const newWindow = window.open('https://example.com', '_blank');

  if (!newWindow) {
    alert('ポップアップがブロックされました。設定をご確認ください。');
  }
});

まとめ

本記事では、JavaScriptを使用してリンクを新しいタブ/ウィンドウで開いたことを検知する方法について解説しました。

• イベントプロパティの活用: ctrlKey、metaKey、button、shiftKeyなどのプロパティを使用して、新しいタブ/ウィンドウでの開き方を検知できます。
• window.openの利用: プログラムaticallyに新しいウィンドウを開く場合、window.openメソッドを使用し、返り値を確認して開かれたかどうかを判定できます。
• ブラウザ間の互換性: 主要なブラウザで動作するように、複数の条件を組み合わせて判定することが重要です。
• 実践的な応用: クリック追跡システムの実装例では、実際のアプリケーションで役立つ具体的なコードを紹介しました。

この記事を通して、ユーザーの行動をより詳細に追跡し、分析するための技術を学ぶことができたはずです。今後は、この技術を応用して、より高度なユーザー分析やパーソナライズされた体験の提供に挑戦してみてください。

参考資料

参考にした記事、ドキュメント、書籍などがあれば、必ず記載しましょう。

• MDN Web Docs: Mouse events
• Google Analytics: Event tracking
• JavaScript.info: Browser environment, windows
• You Don't Know JS: This & Object Prototypes