デベロッパーガイド
SDK Integration

Web SDK

2024年4月15日に最終更新

Airbridge Web SDKは, Web to App（Webからアプリへの誘導）のコンバージョンデータだけでなく、Web アプリ自体のデータも追跡します。特に、Webとモバイルの両方でアプリを実行している場合、ユーザージャーニーに関するより広範囲なをインサイトを得ることができます。Web SDKから収集したデータは、Airbridgeダッシュボードにて集計、表示され、Webとアプリ両方に関する総合的な解析を提供します。また、簡単にローデータをCSV形式でエクスポートすることもできます。

SDKの実装ガイド

SDKのインストール

SDKをインストールするには、以下の3つのオプションのうちいずれかを使用します。

関数として直接インストール（オプション1）

Headタグの最後に以下のコードを追加します。

12345678
<script>
(function(a_,i_,r_,_b,_r,_i,_d,_g,_e){if(!a_[_b]){var n=function(){var c=i_.createElement(r_);c.onerror=function(){g.queue.filter(function(a){return 0<=_d.indexOf(a[0])}).forEach(function(a){a=a[1];a=a[a.length-1];"function"===typeof a&&a("error occur when load airbridge")})};c.async=1;c.src=_r;"complete"===i_.readyState?i_.head.appendChild(c):a_.addEventListener("load",function h(){a_.removeEventListener("load",h);i_.head.appendChild(c)})},g={queue:[],get isSDKEnabled(){return!1}};_i.concat(_d).forEach(function(c){var a=c.split("."),h=a.pop();a.reduce(function(p,q){return p[q]=p[q]||{}},g)[h]=function(){g.queue.push([c,arguments])}});a_[_b]=g;0<_g?(_b=new (a_.XDomainRequest||a_.XMLHttpRequest),_i=function(){},_b.open("GET",_r),_b.timeout=_g,_b.onload=function(){n()},_b.onerror=_i,_b.onprogress=_i,_b.ontimeout=_i,_b.send()):n()}})(window,document,"script","airbridge","//static.airbridge.io/sdk/latest/airbridge.min.js","init startTracking fetchResource setBanner setDownload setDownloads openDeeplink setDeeplinks sendWeb setUserAgent setUserAlias addUserAlias setMobileAppData setUserId setUserEmail setUserPhone setUserAttributes clearUser setDeviceAlias removeDeviceAlias clearDeviceAlias setDeviceIFV setDeviceIFA setDeviceGAID events.send events.signIn events.signUp events.signOut events.purchased events.addedToCart events.productDetailsViewEvent events.homeViewEvent events.productListViewEvent events.searchResultViewEvent".split(" "),["events.wait","createTouchpoint"],0);

airbridge.init({
    app: '<APP NAME>',
    webToken: '<WEB SDK TOKEN>'
});
</script>

Airbridgeダッシュボード → Settings → Tokensを選択して、アプリ名とWeb SDKトークンを確認できます。

Web to Appの貢献度を測定する際、保護されたアトリビューションウィンドウの設定を推奨します。詳細については、このガイドを参照してください。

NPMモジュールを使用したインストール（オプション2）

Airbridge NPMモジュールをインストールします。

Shell

1
npm install airbridge-web-sdk-loader

airbridgeをインポートして、airbridge.init関数を呼び出します。

123456
import airbridge from 'airbridge-web-sdk-loader'

airbridge.init({
    app: 'App Name',
    webToken: 'Web SDK Token',
})

Google Tag Managerを使用したインストール（オプション3）

「Google Tag Managerを使用したSDKのインストール」を参照してください。

対応ブラウザ

Airbridge Web SDKは、ES5対応のすべてのブラウザで動作します。

Chrome	Firefox	Safari	Internet Explorer
✔️	✔️	✔️	IE 9以降

SDKのテスト

123
button.onclick = () => {
    console.log(airbridge.isSDKEnabled)
}

SDKがインストールされたWebページに移動して、デベロッパーツールのコンソールでairbridge.isSDKEnabledが「true」であることを確認します。

出力が適切であれば、「Airbridgeダッシュボード → Raw Data → Web Real-time Log」を選択して、「オープン」イベントが表示されていることを確認します。

注意
Web SDKの読み込みが完了すると、airbridge.isSDKEnabledの値は「false」から「true」に変わります。

ユーザー設定

SDK初期化時のユーザー識別子と属性の設定

ユーザー情報は、SDKの初期化時に自動的に送信されます。ユーザー情報はブラウザのローカルストレージに保存され、それ以降、Webサイトでのすべてのイベントは、signOutが呼び出されるまでユーザー情報とともに送信されます。

12345678910111213141516
airbridge.init({
    app: 'App Name',
    webToken: 'Web SDK Token',
    user: {
        externalUserID: 'personID',
        externalUserEmail: 'persondoe@airbridge.io',
        externalUserPhone: '1(123)123-1234',
        attributes: {
            age_group: 30,
            gender: 'Female'
        },
        alias: {
            amplitude_device_id: '83587901-2726-4E29-ACEB-A90B0F7E75F6',
        },
    }
});

属性	型	説明
`user.externalUserID`	String	ユーザーID
`user.externalUserEmail`	String	ユーザーのメールアドレス
`user.externalUserPhone`	String	ユーザーの電話番号
`user.attributes`	Object	カスタムユーザー属性 (カスタムキーバリューペア)
`user.alias`	Object	ユーザーのエイリアス

ユーザー識別子の設定

外部識別子ではなく、独自のユーザー識別子を設定するには、以下のメソッドを使用します。ユーザー識別子はブラウザのローカルストレージに保存され、それ以降、Webサイトでのすべてのイベントは、signOutが呼び出されるまでユーザー情報とともに送信されます。

12
airbridge.setUserId('654321');
airbridge.setUserEmail('user@example.com');

また、サードパーティツール（Amplitude, Brazeなど）とのマッチングに使用されるユーザーのエイリアスを設定することもできます。

1234567
airbridge.setUserAlias({
  "amplitude_id": "12345678",
  "braze_ext_id": "87654321"  
})

airbridge.addUserAlias("amplitude_id", "12345678")
airbridge.addUserAlias("braze_ext_id", "87654321")

ユーザー属性の設定

より正確なマルチタッチアトリビューション（MTA）解析、追加の内部データ解析、そして、サードパーティソリューションのリンクのために追加のユーザー属性が使用されます。

123456
airbridge.setUserAttributes({
    "age": 45,
    "gender": "male",
    "name": "Gildong Hong"
    // ...
});

テスト

ユーザー情報の設定値が、SDKから適切に送信されていることを確認します。

ユーザー識別子の情報を設定します。
SDKを使用して、イベントを送信します。
「Airbridgeダッシュボード → Raw Data → Web Real-time Logs」を選択して、イベントをクリックします。
ユーザー情報が、userブロックの下に正しく送信されているかを確認します。

デバイス設定

デバイスの識別子の設定

Airbridge SDKからデバイスの識別子を設定します。デバイス識別子は、削除しない限り、Webサイトを閉じた後でも保持されます。

123
airbridge.setDeviceAlias('ADD_YOUR_KEY', 'AND_YOUR_VALUE')
airbridge.removeDeviceAlias('ADD_YOUR_KEY')
airbridge.clearDeviceAlias()

メソッド	説明
`setDeviceAlias(key: string, value: string)`	デバイスの識別子にキーバリューペアを追加します。
`removeDeviceAlias(key: string)`	該当するデバイスの識別子を削除します。
`clearDeviceAlias()`	デバイスの識別子をすべて削除します。

注意
iOSの場合、クッキーの最大保存時間に基づいて最大7日間デバイスの識別子を保持します。

イベント設定

重要なユーザーアクションが発生したときに、アプリ内イベントを送信して、各チャネルのパフォーマンスを測定することができます。

すべてのイベントパラメータはオプションです。ただし、イベントに関する情報が増えると、より正確な統計を得ることができます。

カスタムイベント

名称: send

フィールド	型	詳細パラメータフィールド名	型	パラメータの説明
category	String	-	-	イベント名（必須）
info	Object	label	String	イベントのサブ属性1
info	Object	action	String	イベントのサブ属性2
value	Object	value	Number	カスタムイベントの値
info	Object	semanticAttributes	Object	セマンティックイベント属性
info	Object	customAttributes	Object	カスタムイベント属性

1234567891011
airbridge.events.send("category", {
    label: "label",
    action: "action",
    value: 10,
    semanticAttributes: {
        transactionID: "transaction_123",
    },
    customAttributes: {
        key: "value",
    }
});

標準イベント

ホーム画面の表示

名称	フィールド	型	パラメータの説明
homeViewEvent	-	-	-

1
airbridge.events.send('airbridge.ecommerce.home.viewed');

ユーザーのサインアップ

フィールド	型	説明
userID	String	ユーザーID
userEmail	string	ユーザーのメールアドレス
userPhone	string	ユーザーの電話番号
attributes	object	ユーザーの属性
alias	object	ユーザーのエイリアス

1234
airbridge.setUserId('ab180');
airbridge.setUserEmail('user@example.com');

airbridge.events.send('airbridge.user.signup');

ユーザーログイン

フィールド	型	説明
userID	String	ユーザーID
userEmail	String	ユーザーのメールアドレス
userPhone	String	ユーザーの電話番号
attributes	Object	ユーザーの属性
alias	Object	ユーザーのエイリアス

1234
airbridge.setUserId('ab180');
airbridge.setUserEmail('user@example.com');

airbridge.events.send('airbridge.user.signin');

ユーザーログアウト

名称	Field	型	パラメータの説明
signOut	-	-	-

123
airbridge.events.send('airbridge.user.signout');

airbridge.clearUser();

製品リストの表示

フィールド	型	詳細なパラメータフィールド名	型	パラメータの説明
productListID	string	-	-	製品リストID
products	Array<Product>	-	-	製品の配列
products	Array<Product>	productID	string	製品ID
products	Array<Product>	name	string	製品名
products	Array<Product>	price	number	製品の価格
products	Array<Product>	currency	string	製品の通貨
products	Array<Product>	quantity	number	製品の数量
products	Array<Product>	position	number	製品のポジショニング

123456789101112131415161718192021
airbridge.events.send('airbridge.ecommerce.productList.viewed', {
    semanticAttributes: {
        productListID: 'food',
        products: [
            {
                productID: 'coke_zero',
                name: 'Coke Zero',
                price: 1.99,
                currency: 'USD',
                position: 1
            },
            {
                productID: 'burger_cheese_double',
                name: 'Double Cheeseburger',
                price: 3.99,
                currency: 'USD',
                position: 2
            }
        ]
    }
});

製品詳細の表示

名称: products

型：配列<オブジェクト>

フィールド	型	パラメータの説明
-	-	製品オブジェクト配列
productID	string	製品ID
name	string	製品名
price	number	製品の価格
currency	string	製品の通貨
quantity	number	製品の数量
position	number	製品のポジショニング

1234567891011
airbridge.events.send('airbridge.ecommerce.product.viewed', {
    semanticAttributes: {
        products: [{
            productID: 'coke_zero',
            name: 'Coke Zero',
            price: 1.99,
            currency: 'USD',
            position: 1
        }]
    }
});

検索結果の表示

フィールド	型	詳細なパラメータフィールド名	型	パラメータの説明
query	string	-	-	クエリの検索
products	Array<Product>	-	-	製品の配列
products	Array<Product>	productID	string	製品ID
products	Array<Product>	name	string	製品名
products	Array<Product>	price	number	製品の価格
products	Array<Product>	currency	string	製品の通貨
products	Array<Product>	quantity	number	製品の数量
products	Array<Product>	Position	number	製品のポジショニング

123456789101112131415161718192021
airbridge.events.send('airbridge.ecommerce.searchResults.viewed', {
    semanticAttributes: {
        products: [
            {
                productID: 'coke_zero',
                name: 'Coke Zero',
                price: 1.99,
                currency: 'USD',
                position: 1
            },
            {
                productID: 'burger_cheese_double',
                name: 'Double Cheeseburger',
                price: 3.99,
                currency: 'USD',
                position: 2
            }
        ],
        query: 'Search Query'
    }
});

カートに追加

フィールド	型	詳細なパラメータフィールド名	型	パラメータの説明
cartID	string	-	-	製品カートID
totalValue	number	-	-	製品の総価格
currency	string	-	-	製品の通貨
products	Array<Product>	-	-	製品の配列
productID	Array<Product>	productID	string	製品ID
productID	Array<Product>	name	string	製品名
productID	Array<Product>	price	number	製品の価格
productID	Array<Product>	currency	string	製品の通貨
productID	Array<Product>	quantity	number	製品の数量
productID	Array<Product>	position	number	製品のポジショニング

12345678910111213141516171819202122232425
airbridge.events.send('airbridge.ecommerce.product.addedToCart', {
    value: 13.95,
    semanticAttributes: {
        products: [
            {
                productID: 'coke_zero',
                name: 'Coke Zero',
                price: 1.99,
                currency: 'USD',
                quantity: 3,
                position: 1
            },
            {
                productID: 'burger_cheese_double',
                name: 'Double Cheeseburger',
                price: 3.99,
                currency: 'USD',
                quantity: 2,
                position: 2
            }
        ],
        cartID: '73926365',
        currency: 'USD'
    }
});

注文完了

フィールド	型	詳細なパラメータフィールド名	型	パラメータの説明
inAppPurchased	boolean	-	-	アプリ内での購入製品
totalValue	number	-	-	製品の総価格
currency	string	-	-	製品の通貨
transactionID	string	-	-	トランザクションID
products	Array<Product>	-	-	製品の配列
products	Array<Product>	productID	string	製品ID
products	Array<Product>	name	string	製品名
products	Array<Product>	price	number	製品の価格
products	Array<Product>	currency	string	製品の通貨
products	Array<Product>	quantity	number	製品の数量
products	Array<Product>	position	number	製品のポジショニング

1234567891011121314151617181920212223242526
airbridge.events.send('airbridge.ecommerce.order.completed', {
    value: 13.95,
    semanticAttributes: {
        products: [
            {
                productID: 'coke_zero',
                name: 'Coke Zero',
                price: 1.99,
                currency: 'USD',
                quantity: 3,
                position: 1
            },
            {
                productID: 'burger_cheese_double',
                name: 'Double Cheeseburger',
                price: 3.99,
                currency: 'USD',
                quantity: 2,
                position: 2
            }
        ],
        inAppPurchased: true,
        currency: 'USD',
        transactionID: '16874326'
    }
});

イベント送信の検証

イベントがSDKから適切に送信されていることを確認します。

SDKを使用して、イベントを送信します。
「Airbridgeダッシュボード → Raw Data → Web Real-time Logs」を選択して、イベントが表示されているかを確認します。

Web to Appの設定

Airbridge Web SDKでは、Web to Appのシームレスな体験をユーザーに提供することができます。以下のメソッドを使用することで、開発者は各ボタンを個別にコーディングする必要はありません。また、ボタンは主要なすべてのブラウザで動作します。

ダウンロードボタンの追加

ボタンのID値を使用して、ダウンロード機能を追加し、そのパフォーマンスを追跡します。

12345678910111213141516171819
// html
<button id="app_download">Go to app</button>

// javascript
airbridge.setDownloads({
    buttonID: "app_download",
    // or ["app_download_1", "app_download_2", ...]
    defaultParams: {
        campaign: 'example_campaign',
        medium: 'example_medium',
        term: 'example_term',
        content: 'example_content'
    },
    ctaParams: {
        cta_param_1: '1',
        cta_param_2: '2',
        cta_param_3: '3',
    }
});

必須

buttonID：ボタンのID属性の値です。配列も可能です。

オプション

defaultParams：キャンペーンパラメータ

設定されている場合、ボタンをクリックするとdefaultParamsが送信されます。

注意
SDKはアプリマーケットにユーザーを送信する必要があるため、<a>タグやonclick機能は使用しないでください。

DeepLinkボタンの追加

ボタンのID値を使用してディープリンクを埋め込み、そのパフォーマンスを追跡します。

setDeeplinksでは、各ボタンのアクションをカスタマイズすることができます。各プラットフォーム（OS）のディープリンクへのリダイレクトを個別に設定できるだけでなく、フォールバックやキャンペーンパラメータをオーバーライドすることもできます。これにより、Web属性を正確に追跡することができます。また、Webサイトのすべてのボタンのディープリンクを個別に作成する必要がなくなります。

12345678910111213141516171819202122
airbridge.setDeeplinks({
    buttonID: "deeplinking-button-1",
    // or ["deeplink-button-1", "deeplink-button-2", ...]
    deeplinks: {
        ios: "ablog://main",
        android: "ablog://main",
        desktop: "https://www.airbridge.io/blog"
    },
    fallbacks: {
        ios: "itunes-appstore",
        // itunes-appstore(default), google-play, url
        android: "google-play"
        // google-play(default), itunes-appstore, url
    },
    defaultParams: {
        campaign: 'example_campaign',
        medium: 'example_medium',
        term: 'example_term',
        content: 'example_content'
    },
    desktopPopUp: true
});

必須

deeplinks.ios：iOS環境でボタンがクリックされたときに実行されるディープリンク。（スキームを使用するディープリンクのみ許可）
deeplinks.android：Android環境でボタンがクリックされたときに実行されるディープリンク。（スキームを使用するディープリンクのみ許可）
deeplinks.desktop：デスクトップ環境でボタンがクリックされたときに実行されるディープリンク。
fallbacks.ios：iOSでディープリンクが失敗した場合のデスティネーション
fallbacks.android：Androidでディープリンクが失敗した場合のデスティネーション
- itunes-appstore：アプリのApple AppStoreページ
- google-play ：アプリのAndroid PlayStoreページ
- url ：http/httpsスキーマURL
buttonID：ボタンのid属性の値です。配列にすることができます。

オプション

defaultParams：キャンペーンパラメータ
desktopPopUp：trueに設定されている場合、デスクトップ環境の新しいウィンドウでディープリンクが実行されます。
注意：SDKはアプリマーケットにユーザーを送信する必要があるため、<a>タグやonclick機能は使用しないでください。

リレーページの設定

redirect: trueが設定されている場合、ディープリンクはWebページにアクセスしようとする全ての着信リクエストに対して自動的に実行されます。

123456789101112131415
airbridge.setDeeplinks({
    buttonID: "deeplinking-button-1",
    deeplinks: {
        ios: "example://detail?id=1",
        android: "example://detail?id=1",
        desktop: "https://example.com/detail?id=1"
    },
    fallbacks: {
        // itunes-appstore(default), google-play, url
        ios: "itunes-appstore",
        // google-play(default), itunes-appstore, url
        android: "google-play"
    },
    redirect: true
});

関数呼び出しでアプリを開く

openDeeplink関数を呼び出すことで、アプリを開くことができます。

123456789101112
airbridge.openDeeplink({
    type: "redirect",
    deeplinks: {
        ios: "example://detail?id=1",
        android: "example://detail?id=1",
        desktop: "https://example.com/detail?id=1"
    },
    fallbacks: {
        ios: "itunes-appstore",
        android: "google-play"
    },
});

onclickなどユーザーのアクションで実行される関数を呼び出す場合はtype: "click"、ユーザーのアクションなしで直接アプリを開く場合はtype: "redirect"を使用してください。

Web to Appバナー

Web to App バナーは、Webユーザーがアプリをインストールする際に表示されるバナーです。

123456
airbridge.setBanner({
    title: 'AirStyle',
    description: 'Find your perfect style!!',
    keyColor: '#00a0c6',
    position: 1
});

タイトル、説明、ボタン、色、その他のバナーのプロパティを変更することができます。

詳細設定

キャンペーンパラメータの設定

広告のランディングページがWebサイトの場合、複数のパラメータを使用してURLに情報を追加することができます。パラメータを使用して、Webサイトへのユーザージャーニーを追跡することができます。

パラメータ解析は、自動または手動を選択できます。anual.

`utmParsing` （自動）

utmParsing: trueオプションでairbridge.initメソッドを呼び出すと、UTM値は自動的にAirbridgeキャンペーンパラメータとして保存され、AirbridgeのActualsレポートで確認できます。

URLパラメータ	Airbridgeキャンペーンパラメータ
utm_source	Channel (`channel`)
utm_campaign	Campaign (`campaign`)
utm_medium	Sub Publisher (`sub_id`)
utm_term	Term (`term`)
utm_content	Content (`content`)

utm_sourceが不明の場合、他のUTMパラメータは解析されません。

12345
airbridge.init({
    app: 'App Name',
    webToken: 'Web SDK Token',
    utmParsing: true
});

URLは、window.location.href 値です。

urlQueryMapping （自動）

utmParsing: trueオプションでinitメソッドを呼び出すと、UTM値は自動的にAirbridgeキャンペーンパラメータとして保存され、AirbridgeのActualsレポートで確認できます。

urlQueryMappingを使用して、他のパラメータを自動的に保存することができます。airbridge.initメソッドが呼び出されると、urlQueryMappingのキーバリューペアが挿入されます。Airbridgeで使用できるキーを以下に示します。

パラメータ名	説明
channel	チャネル
campaign	キャンペーン
ad_group	広告グループ
ad_creative	広告クリエイティブ
content	コンテンツ
term	キーワード
sub_id	サブパブリッシャー
sub_id_1	サブサブパブリッシャー1
sub_id_2	サブサブパブリッシャー2
sub_id_3	サブサブパブリッシャー3
campaign_id	キャンペーンID
ad_group_id	広告グループID
ad_creative_id	広告クリエイティブID
term_id	キーワードID

utm_sourceやutm_campaignでinternal_codeなどのカスタムパラメータを使用すると、URLは以下のような構造になります。

https://example.com/?utm_source=google&utm_campaign=jan_ua_campaign&internal_code=ABC

以下は各パラメータをマッピングして、Airbridgeダッシュボードに表示する例です。

123456789
airbridge.init({
    app: 'App Name',
    webToken: 'Web SDK Token',
    urlQueryMapping: {
      channel: 'utm_source',
      campaign: 'utm_campaign', 
      sub_id_1: 'internal_code'
    }
});

上記URLからコンバージョンが発生した場合、「Airbridgeダッシュボード → Actuals Report → Configuration → GroupBy → Sub Sub Publisher 1」を選択して、internal_codeのデータを使用できます。

手動機能

以下は手動でパラメータを解析する例です。

paramsオブジェクトから情報を抽出し、init関数の呼び出し時に情報を登録します。

1234567891011121314151617181920212223242526272829303132

function queryStringToJSON(url) {
    if (url.search.slice !== undefined) {
        var pairs = url.search.slice(1).split('&');
    } else {
        var pairs = url.split('?')[1].split('&');
    }

    var result = {};
    pairs.forEach(function(pair) {
        pair = pair.split('=');
        result[pair[0]] = decodeURIComponent(pair[1] || '');
    });

    return JSON.parse(JSON.stringify(result));
}

var url = window.location.href;
var params = queryStringToJSON(url);

// initialize
airbridge.init({
    app: 'App Name',
    webToken: 'Web Token',
    defaultChannel: params['utm_source'],
    defaultParams: {
        campaign: params['utm_campaign'],
        medium: params['utm_medium'],
        content: params['utm_content'],
        term: params['utm_term']
    }
});

Name	Description
defaultChannel	Webページのすべてのイベントに記録される広告主の名前
defaultParams.campaign	Webページで発生したすべてのイベントに記録されるキャンペーンの名前
defaultParams.medium	Webページで発生したすべてのイベントに記録される広告媒体
defaultParams.content	Webページで発生したすべてのイベントに記録される広告のコンテンツ
defaultParams.term	Webページのすべてのイベントに記録される広告クエリ

ユーザー情報の削除

ユーザーID、メールアドレス、電話番号、エイリアス、ユーザーの属性を削除するには、clearUserメソッドを使用します。

1
JavaScriptairbridge.clearUser()

ユーザー情報の暗号化

クライアントレベルでuser.externalUserEmailとuser.externalUserPhoneのハッシュ値 (SHA256) を生成します。user.externalUserIDはこのオプションによる影響を受けず、ハッシュ値は生成されません。

123456
airbridge.init({
    app: 'App Name',
    webToken: 'Web Token',
    userHash: true, // Default false
    // ...
});

イベント送信の遅延

イベントの送信が完了する前にリダイレクトが発生した場合（リレーページからイベントを送信など）、データが消失する可能性があります。リダイレクトされる前にイベントを確実に送信するには、events.waitを使用します。

パラメータ	型	説明
timeout	Number	最大待ち時間（ミリ秒）
callback	(error: string) => void	イベント送信時にコールバック

12345678910
airbridge.init({
    app: 'App Name',
    webToken: 'Web Token',
});

airbridge.events.send('category');

airbridge.events.wait(3000, function (error) {
    location.href = 'url';
});

アトリビューションウィンドウの設定

アトリビューションウィンドウを調整するには、cookieWindowを使用します。

12345678910111213
// Set attribution window to 1 day
airbridge.init({
    app: 'App Name',
    webToken: 'Web Token',
    cookieWindow: 1
});

// Set attribution window to 720 minutes (12 hours)
airbridge.init({
    app: 'App Name',
    webToken: 'Web Token',
    cookieWindowInMinutes: 720
});

cookieWindowとcookieWindowInMinutesの両方が設定されている場合、cookieWindowInMinutesが適用されます。

Cookie共有オプション

ユーザー追跡は、サブドメイン間で共有されるブラウザのCookieを介して行われます。サブドメイン間でCookieの共有を停止するには、shareCookieSubdomainをfalseに設定します。

123456
// initialize 
airbridge.init({ 
    app: 'App Name',
    webToken: 'Web Token',
    shareCookieSubdomain: false
});

shareCookieSubdomainのデフォルト値はtrueです。

1つのサービスが複数のサブドメインを使用している場合、trueを推奨します。
複数のサービスが複数のサブドメインを使用している場合、falseを推奨します。

例

キャンペーンAトラッキングリンク → https://airbridge.io → https://blog.airbridge.io,

shareCookieSubdomain: true
- https://airbridge.io上のイベント → キャンペーンAに起因
- https://blog.airbridge.io上のイベント → キャンペーンAに起因
shareCookieSubdomain: false
- https://airbridge.io上のイベント → キャンペーンAに起因
- http://blog.airbridge.io上のイベント → デフォルトのキャンペーンに起因

個人情報の保護

SDKの初期化時にautoStartTrackingEnabledがfalseに設定されている場合、airbridge.startTrackingが呼び出されるまでイベントは送信されません。

1234567
airbridge.init({
    app: 'App Name',
    webToken: 'Web Token',
    autoStartTrackingEnabled: false,
});

airbridge.startTracking()

autoStartTrackingEnabledのデフォルト値はtrueです。

保護されたアトリビューションウィンドウ

アプリがすでにインストールされている場合、ディープリンク付きボタンをクリックすると「ディープリンクオープン（アプリ）」イベントが発生します。この場合、ボタンはリエンゲージメントのタッチポイントとして表示され、イベントは「Owned Channel Type Touchpoint（airbridge.Websdk）」の一因となります。

メディアチャネルへの貢献度をクレジットするには、useProtectedAttributionWindowをtrueに設定します。

状況	デフォルトのコントリビューションチャネル	保護されたアトリビューションウィンドウを使用する際のコントリビューションチャネル	型
1. メディアチャネルをクリック	`naver.searchad`	`naver.searchad`	タッチポイント（連携チャネル型）
2. Webページを開く	`naver.searchad`	`naver.searchad`	コンバージョン（Web）
3. 「See with App」ボタンをクリック（Airbridgeディープリンクを使用）	`airbridge.websdk`	`airbridge.websdk`	タッチポイント（オウンドチャネル型）
4. ディープリンクでアプリを開く	`airbridge.websdk`	`naver.searchad`	コンバージョン（アプリ）

1234567
airbridge.init({
    app: 'App Name',
    webToken: 'Web Token',
    // ...
    useProtectedAttributionWindow: true,
    protectedAttributionWindowInMinutes: 60
});

protectedAttributionWindowInMinutesのデフォルト値は30です。つまり、メディアチャネルをクリックした後でWebページを開くと、Webページを開いてから30秒以内にイベントが発生した場合に限り、「ディープリンクオープン（アプリ）」イベントがメディアチャネルにクレジットされます。protectedAttributionWindowInMinutesは最大4320（3日）まで設定することができます。

他のWebページへのジャーニーを追跡

ユーザーが他のWebサイトに移動する場合、sendWebメソッドを使用します。移動したウェブサイトにもAirbridge Web SDKがインストールされていれば、ユーザージャーニーを繋いでアトリビューションの成果を分析することができます。

useProtectedAttributionWindowは、アトリビューションを接続するためにAirbridge SDKを初期化する際にtrueに設定する必要があります。保護されたアトリビューションウィンドウを参照してください。

1234567
// Open in same window
airbridge.sendWeb("https://www.airbridge.io/blog")

// Open in new window
airbridge.sendWeb("https://www.airbridge.io/blog", function(err, res) {
  window.open(res.targetUrl)
})

Google Tag Managerの使用

Google Tag Managerを使用して、Airbridge SDKをインストールすることができます。

SDKのインストール

Google Tag Managerを使用してAirbridge SDKをインストールする場合、以下の手順に従ってください。

「Workspace Overview」の「New Tag」をクリックする、またはコンテナ内で「Tag → New」を選択します。
「Tag Configuration → Custom Settings」で「Custom HTML」を選択します。
下図に示すように、「HTML」セクションにAirbridge SDK codeのコードを挿入します。
「Tag Configuration → Advanced Settings → Tag firing priority」を選択して、0より大きい数値（9999など）を入力します。
「Tag Configuration → Advanced Settings → Tag firing Options」で「Once per page」を選択します。
「Trigger」を「Pageview - DOM Ready」に設定します。
タグの作成が完了したら、送信ボタンを押します。
Check the Airbridge dashboard under real-time logs to verify that the SDK logs are logged properly.

イベントの追跡

Follow these steps to track events using Google Tag Manager.

「Workspace Overview」の「New Tag」をクリックする、またはコンテナ内で「Tag → New」を選択します。
「Tag Configuration → Custom Settings」で「Custom HTML」を選択します。
下図に示すように、「HTML」セクションに追跡するイベントのコードを挿入します。
イベントに応じて、「Advanced Settings > Tag firing options」で「Unlimited」、「Once per event」、「Once per page」を選択します。
イベントに適切なトリガーを設定します。
タグの作成が完了したら、送信ボタンを押します。
リアルタイムロゴの下にあるAirbridgeダッシュボードで、SDKのロゴが適切に記録されていることを確認します。

このページは役に立ちましたか？

ご質問やご提案はありますか？

Web SDKself.__wrap_n!=1&&self.__wrap_b(":R29jtt7ppjtsba:",0.5)