# 他ツールとの連携

{% hint style="info" %}
userIdの指定が必要になる連携についてはあらかじめ [user-profile](https://docs.wicle.io/data-extension/user-profile "mention") の実装が必要となります
{% endhint %}

## URL連携 <a href="#url-integration" id="url-integration"></a>

### 基本フォーマット <a href="#basic-format" id="basic-format"></a>

```
https://app.wicle.io/?apiKey=__YOUR_API_KEY__&userId=__USER_ID__&timestamp=__UNIXTIMESTAMP_MILLS__
```

「timestamp」をセットするとその時点のタイムラインに直接遷移することができます。（任意値です）

※管理画面URLは将来的に変更になる可能性があります

### クライアントサイドでの連携方法 <a href="#block-71ac20efb7ad4fd4b84fa7465ccde836" id="block-71ac20efb7ad4fd4b84fa7465ccde836"></a>

タグが設置されている場合、Wicleの各種関数からURLを取り出すことが可能です。

```
// 指定ユーザーへのURL
window.__WICLE.getAdminUrlForUser('__USER_ID__'); // https://app.wicle.io?apiKey=__YOUR_API_KEY__&userId=__USER_ID__

// 指定ユーザーの現在時刻へのURL
window.__WICLE.getAdminUrlForUserAndCurrentTime('__USER_ID__'); // https://app.wicle.io?apiKey=__YOUR_API_KEY__&userId=__USER_ID__&timestamp=1660740965525


// --- (option) userIdの特定ができない場合、以下の関数からwicleで発行しているuser hashに基づくURLの発行が可能です
// 指定ユーザーへのURL
window.__WICLE.getAdminUrlForNonUser();

// 指定ユーザーの現在時刻へのURL
window.__WICLE.getAdminUrlForNonUserAndCurrentTime();
```

### サーバーサイドでの連携方法 <a href="#block-ede32c04397140238705a70517f9131c" id="block-ede32c04397140238705a70517f9131c"></a>

基本フォーマットに沿ってURLを組み立てて頂く形です。

## 連携の例 <a href="#integration-examples" id="integration-examples"></a>

現在はURLベースでの連携方法になるため、任意データが送信できるサービスならどれでも連携自体は可能です。

以下でサンプルケースとしていくつかのサービスの具体例を記載します。

### Sentry <a href="#sentry" id="sentry"></a>

{% embed url="<https://docs.sentry.io/platforms/javascript/enriching-events/context/>" %}

ユーザー情報の拡張データとしてWicleのURLを紐づける

```
Sentry.setUser({
  id: user.id,
  email: user.email,
  username: user.username,
  wicleUrl: window.__WICLE.getAdminUrlForUser(user.id),
});
```

キャプチャ時にscopeを利用してエラーデータの拡張データとして付与する

```
Sentry.withScope((scope) => {
  scope.setExtra('wicleUrl', window.__WICLE.getAdminUrlForUserAndCurrentTime(user.id));
  Sentry.captureException(error);
});
```

### Mixpanel <a href="#mixpanel" id="mixpanel"></a>

#### ユーザー情報の登録APIでWicleのURLを紐づける <a href="#mixpanel-user-profile" id="mixpanel-user-profile"></a>

<https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#mixpanelregister>

```
mixpanel.identify(user.id);
mixpanel.people.set({
  name: userName,
  email: userEmail,
  wicleUrl: window.__WICLE.getAdminUrlForUser(user.id),
});
```

#### イベント送信時の拡張データとして付与する <a href="#mixpanel-event-tracking" id="mixpanel-event-tracking"></a>

<https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#mixpaneltrack>

```
mixpanel.track('someEvent', {
  'Gender': 'Male',
  'Age': 21,
  'wicleUrl': window.__WICLE.getAdminUrlForUserAndCurrentTime(user.id),
});
```
