押さずに、押したことにする

広告リンクが押されたことを数える仕組みを入れました。動くかどうかは、押してみれば分かります。

ただ、その1回が向こう側に記録されます。

押すと、記録が残る#

広告リンクは、押された時点で相手側に1件のクリックとして記録されます。そこから買われたかどうかに関わらず、クリックの数には入ります。

そして、自分で自分のリンクを押す行為を禁止している提携先があります。

1回くらいは、と思える場面ですが、確かめるたびに押すことになります。テストの回数は1回では終わりません。押さずに済む方法を先に用意しておくほうが筋が通っています。

何を確かめたいのか#

そもそも、押して確かめたいのは何だったか。分けてみると、広告の相手は関係ありませんでした。

最後の行は、普通のリンクが開くかどうかの話です。こちらで作った部分ではありません。確かめる対象から外せます。

押さずに、押したことにする#

やったのは2つです。

ひとつめは、リンクの既定の動作を止めること。ページ全体で、クリックの既定動作を1回だけ打ち消すようにしておきます。

document.addEventListener("click", (e) => e.preventDefault(), true);

最後の true が効いています。これは「他より先に受け取る」という指定で、これを付けると、本文に置いた聞き役より先にこちらが呼ばれます。

ふたつめは、クリックを自分で起こすこと。マウスで押す代わりに、押されたことにします。

link.dispatchEvent(
  new MouseEvent("click", { bubbles: true, cancelable: true })
);

bubbles を付けないと、上の階層に伝わりません。本文の塊に聞き役を置く作りなので、ここが無いと届かず、何も起きないのに「動いていない」と判断するところでした。

結果#

楽天のリンクとAmazonのリンクで、それぞれ試しました。積まれた中身はこうです。

affiliate_network  rakuten
affiliate_product  nape-pro
affiliate_label    楽天で見る（Keychron公式ストア）
article_slug       nape-pro-trackball

affiliate_network  amazon
affiliate_product  nape-pro
affiliate_label    Amazonで見る
article_slug       nape-pro-trackball

行き先のドメインから提携先を判別する部分も、商品のIDを拾う部分も、意図どおりでした。そしてページは記事に留まったままで、相手側には何も届いていません。

この方法で確かめられないこと#

正直に書いておくと、押した本物のクリックと完全に同じではありません。

今回の仕組みは、押された場所から祖先を辿ってリンクを探し、その行き先を見るだけです。座標も、信頼できる操作かどうかも使っていません。だから同じ結果になります。

逆に、座標を使う仕掛けや、新しいタブを開く処理を試すときには、この方法は使えません。何を使っていないかを把握していないと、同じにならないところです。

テスト用のリンクを置く手もあった#

別の案として、提携先ではないURLを指す確認専用のリンクを、一時的にページへ置く方法もあります。

選ばなかったのは、確かめたいものと違うものを確かめることになるからです。本物のリンクには提携用のURLが入っていて、その文字列から提携先を判別しています。別のURLを置いたら、そこを通りません。

本物のリンクのまま、移動だけを止める。確かめる対象を変えないほうが、分かることが多くなります。

今回の学び#

まず、試すこと自体に副作用があるものがあるということ。コードの動作確認は普通ただですが、外部と繋がっている部分では、押すたびに向こうに記録が残ります。回数が増える前提で考えると、最初からただで試せる形を用意するほうが安くつきます。

次に、確かめたいことから、相手先を外せる場合があること。「リンクを押したときの動作」とひとまとまりで見ていると相手が必要に見えますが、分けてみると、自分で書いた部分には相手が出てきませんでした。

そして、作ったクリックが本物と同じになる条件は、使っていない情報が無いことだということ。座標も、信頼の印も使っていないから同じ結果になります。何かを使っていれば、同じ方法は使えませんでした。