# クリックイベントの拡張

## メタデータの追加 <a href="#add-metadata" id="add-metadata"></a>

計測対象要素に `data-wicle-click-additional` 属性を付与することで、任意のデータをクリックイベントに付与することができます。

```html
<a data-wicle-click-additional="string data">link</a>
```

属性を付与すると、クリックの追加情報(additional)フィールドに文字列データとして格納され、検索できるようになります。

<figure><img src="/files/t99vFk3SMQ7Z8ALDcTa7" alt=""><figcaption></figcaption></figure>

## イベント発生対象の追加・除外 <a href="#target-setting" id="target-setting"></a>

### CSSセレクターで設定する

{% content-ref url="/pages/nZFQ8gfLFXkRfH1CWYDZ" %}
[自動計測されるイベント](/data-setting/event-tracking/auto-event.md)
{% endcontent-ref %}

上記のクリック計測対象に合致しない要素を、CSSセレクターを指定し該当するDOMに対するクリックを計測対象として追加したり、逆に計測対象となっている要素を除外することができます。

[プロジェクト設定の計測タグ画面](https://app.wicle.io/settings/mesurement-tag)から設定することができます。

### data属性で設定する

任意のdata属性を指定し、該当するDOMに対するクリックを計測対象として追加・除外できます。

| 設定         | 説明                               |
| ---------- | -------------------------------- |
| 追加対象data属性 | 指定したdata属性を持つ要素のクリックを計測対象に追加します  |
| 除外対象data属性 | 指定したdata属性を持つ要素のクリックを計測対象から除外します |

すでに何らかのトラッキングツールでdata属性を付与している場合に活用できます。

[プロジェクト設定の計測タグ画面](https://app.wicle.io/settings/mesurement-tag)から設定できます。

### HTMLを修正し設定する

CSSセレクターでの指定が厳密にはできないケースや、修正で計測が行われなくなるケースなどが考えられる場合、対象とするHTMLタグに `data-wicle-auto-click` 属性を付与することでその要素のクリックイベントを送信対象とすることができます。

```html
<div data-wicle-auto-click></div>
```

## 確認方法

[送信されるイベントの確認機能](/chrome-extension/event-viewer.md) で、実装後の確認を行うことができます。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wicle.io/data-setting/event-tracking/click-event-extension.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.