Airbridge Web SDKは, Web to App(Webからアプリへの誘導)のコンバージョンデータだけでなく、Web アプリ自体のデータも追跡します。特に、Webとモバイルの両方でアプリを実行している場合、ユーザージャーニーに関するより広範囲なをインサイトを得ることができます。Web SDKから収集したデータは、Airbridgeダッシュボードにて集計、表示され、Webとアプリ両方に関する総合的な解析を提供します。また、簡単にローデータをCSV形式でエクスポートすることもできます。
SDKをインストールするには、以下の3つのオプションのうちいずれかを使用します。
Headタグの最後に以下のコードを追加します。
<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 stopTracking fetchResource openBanner setBanner setDownload setDownloads openDeeplink setDeeplinks sendWeb setUserAgent setMobileAppData setUserID clearUserID setUserEmail clearUserEmail setUserPhone clearUserPhone setUserAttribute removeUserAttribute clearUserAttributes setUserAlias removeUserAlias clearUserAlias clearUser setUserId setUserAttributes addUserAlias 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: '<YOUR_APP_NAME>',
webToken: '<YOUR_WEB_TOKEN>',
})
</script>
Airbridgeダッシュボード → Settings → Tokensを選択して、アプリ名とWeb SDKトークンを確認できます。
Web to Appの貢献度を測定する際、保護されたアトリビューションウィンドウの設定を推奨します。詳細については、このガイド を参照してください。
Airbridge NPMモジュールをインストールします。
npm install airbridge-web-sdk-loader
airbridge
をインポートして、airbridge.init
関数を呼び出します。
import airbridge from 'airbridge-web-sdk-loader'
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
})
「Google Tag Managerを使用したSDKのインストール」を参照してください。
Airbridge Web SDKは、ES5対応のすべてのブラウザで動作します。
Chrome | Firefox | Safari | Internet Explorer |
---|---|---|---|
✔️ | ✔️ | ✔️ | IE 9以降 |
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の初期化時に自動的に送信されます。ユーザー情報はブラウザのローカルストレージに保存され、それ以降、Webサイトでのすべてのイベントは、signOut
が呼び出されるまでユーザー情報とともに送信されます。
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
user: {
externalUserID: 'personID',
externalUserEmail: 'persondoe@airbridge.io',
externalUserPhone: '1(123)123-1234',
attributes: {
age_group: 30,
gender: 'Female'
},
alias: {
custom_id: '83587901-2726-4E29-ACEB-A90B0F7E75F6',
},
},
})
属性 | 型 | 説明 |
---|---|---|
| String | ユーザーID |
| String | ユーザーのメールアドレス |
| String | ユーザーの電話番号 |
| Object | カスタムユーザー属性 (カスタムキーバリューペア) |
| Object | ユーザーのエイリアス |
外部識別子ではなく、独自のユーザー識別子を設定するには、以下のメソッドを使用します。ユーザー識別子はブラウザのローカルストレージに保存され、それ以降、Webサイトでのすべてのイベントは、signOut
が呼び出されるまでユーザー情報とともに送信されます。
airbridge.setUserID('654321')
airbridge.setUserEmail('user@example.com')
また、サードパーティツール(Amplitude, Brazeなど)とのマッチングに使用されるユーザーのエイリアスを設定することもできます。
airbridge.setUserAlias('amplitude_id', '12345678')
airbridge.setUserAlias('braze_ext_id', '87654321')
より正確なマルチタッチアトリビューション(MTA)解析、追加の内部データ解析、そして、サードパーティソリューションのリンクのために追加のユーザー属性が使用されます。
airbridge.setUserAttribute('age', 45)
airbridge.setUserAttribute('gender', 'male')
airbridge.setUserAttribute('name', 'Gildong Hong')
ユーザー情報の設定値が、SDKから適切に送信されていることを確認します。
ユーザー識別子の情報を設定します。
SDKを使用して、イベントを送信します。
「Airbridgeダッシュボード → Raw Data → Web Real-time Logs」を選択して、イベントをクリックします。
ユーザー情報が、user
ブロックの下に正しく送信されているかを確認します。
Airbridge SDKからデバイスの識別子を設定します。デバイス識別子は、削除しない限り、Webサイトを閉じた後でも保持されます。
airbridge.setDeviceAlias('YOUR_KEY', 'YOUR_VALUE')
airbridge.removeDeviceAlias('YOUR_KEY')
airbridge.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 | カスタムイベント属性 |
airbridge.events.send('category', {
label: 'label',
action: 'action',
value: 10,
semanticAttributes: {
transactionID: 'transaction_123',
},
customAttributes: {
key: 'value',
}
})
名称 | フィールド | 型 | パラメータの説明 |
---|---|---|---|
homeViewEvent | - | - | - |
airbridge.events.send('airbridge.ecommerce.home.viewed')
フィールド | 型 | 説明 |
---|---|---|
userID | String | ユーザーID |
userEmail | string | ユーザーのメールアドレス |
userPhone | string | ユーザーの電話番号 |
attributes | object | ユーザーの属性 |
alias | object | ユーザーのエイリアス |
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 | ユーザーのエイリアス |
airbridge.setUserID('ab180')
airbridge.setUserEmail('user@example.com')
airbridge.events.send('airbridge.user.signin')
名称 | Field | 型 | パラメータの説明 |
---|---|---|---|
signOut | - | - | - |
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 | 製品のポジショニング |
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 | 製品のポジショニング |
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 | 製品のポジショニング |
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 |
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 | 製品のポジショニング |
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 | - | - | アプリ内での購入製品 |
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 | 製品のポジショニング |
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」を選択して、イベントが表示されているかを確認します。
Airbridge Web SDKでは、Web to Appのシームレスな体験をユーザーに提供することができます。以下のメソッドを使用することで、開発者は各ボタンを個別にコーディングする必要はありません。また、ボタンは主要なすべてのブラウザで動作します。
ボタンのID値を使用して、ダウンロード機能を追加し、そのパフォーマンスを追跡します。
// 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
機能は使用しないでください。
ボタンのID値を使用してディープリンクを埋め込み、そのパフォーマンスを追跡します。
setDeeplinks
では、各ボタンのアクションをカスタマイズすることができます。各プラットフォーム(OS)のディープリンクへのリダイレクトを個別に設定できるだけでなく、フォールバックやキャンペーンパラメータをオーバーライドすることもできます。これにより、Web属性を正確に追跡することができます。また、Webサイトのすべてのボタンのディープリンクを個別に作成する必要がなくなります。
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ページにアクセスしようとする全ての着信リクエストに対して自動的に実行されます。
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
関数を呼び出すことで、アプリを開くことができます。
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ユーザーがアプリをインストールする際に表示されるバナーです。
airbridge.setBanner({
title: 'AirStyle',
description: 'Find your perfect style!!',
keyColor: '#00a0c6',
position: 1
})
タイトル、説明、ボタン、色、その他のバナーのプロパティを変更することができます。
広告のランディングページがWebサイトの場合、複数のパラメータを使用してURLに情報を追加することができます。パラメータを使用して、Webサイトへのユーザージャーニーを追跡することができます。
パラメータ解析は、自動または手動を選択できます。anual.
utmParsing: true
オプションでairbridge.init
メソッドを呼び出すと、UTM
値は自動的にAirbridgeキャンペーンパラメータとして保存され、AirbridgeのActualsレポートで確認できます。
URLパラメータ | Airbridgeキャンペーンパラメータ |
---|---|
utm_source | Channel ( |
utm_campaign | Campaign ( |
utm_medium | Sub Publisher ( |
utm_term | Term ( |
utm_content | Content ( |
utm_source
が不明の場合、他のUTMパラメータは解析されません。
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
utmParsing: true,
})
URLは、window.location.href
値です。
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ダッシュボードに表示する例です。
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_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
関数の呼び出し時に情報を登録します。
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: 'YOUR_APP_NAME',
webToken: 'YOUR_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
メソッドを使用します。
airbridge.clearUser()
クライアントレベルでuser.externalUserEmail
とuser.externalUserPhone
のハッシュ値 (SHA256) を生成します。user.externalUserID
はこのオプションによる影響を受けず、ハッシュ値は生成されません。
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
userHash: true, // Default false
})
イベントの送信が完了する前にリダイレクトが発生した場合(リレーページからイベントを送信など)、データが消失する可能性があります。リダイレクトされる前にイベントを確実に送信するには、events.wait
を使用します。
パラメータ | 型 | 説明 |
---|---|---|
timeout | Number | 最大待ち時間(ミリ秒) |
callback | (error: string) => void | イベント送信時にコールバック |
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
})
airbridge.events.send('category')
airbridge.events.wait(3000, function (error) {
location.href = 'url'
})
アトリビューションウィンドウを調整するには、cookieWindow
を使用します。
// Set attribution window to 1 day
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
cookieWindow: 1,
})
// Set attribution window to 720 minutes (12 hours)
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
cookieWindowInMinutes: 720,
})
cookieWindow
とcookieWindowInMinutes
の両方が設定されている場合、cookieWindowInMinutes
が適用されます。
ユーザー追跡は、サブドメイン間で共有されるブラウザのCookieを介して行われます。サブドメイン間でCookieの共有を停止するには、shareCookieSubdomain
をfalseに設定します。
// initialize
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_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
が呼び出されるまでイベントは送信されません。
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
autoStartTrackingEnabled: false,
})
airbridge.startTracking()
autoStartTrackingEnabled
のデフォルト値はtrue
です。
アプリがすでにインストールされている場合、ディープリンク付きボタンをクリックすると「ディープリンクオープン(アプリ)」イベントが発生します。この場合、ボタンはリエンゲージメントのタッチポイントとして表示され、イベントは「Owned Channel Type Touchpoint(airbridge.Websdk)」の一因となります。
メディアチャネルへの貢献度をクレジットするには、useProtectedAttributionWindow
をtrue
に設定します。
状況 | デフォルトのコントリビューションチャネル | 保護されたアトリビューションウィンドウを使用する際のコントリビューションチャネル | 型 |
---|---|---|---|
1. メディアチャネルをクリック |
|
| タッチポイント(連携チャネル型) |
2. Webページを開く |
|
| コンバージョン(Web) |
3. 「See with App」ボタンをクリック(Airbridgeディープリンクを使用) |
|
| タッチポイント(オウンドチャネル型) |
4. ディープリンクでアプリを開く |
|
| コンバージョン(アプリ) |
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
useProtectedAttributionWindow: true,
protectedAttributionWindowInMinutes: 60,
});
protectedAttributionWindowInMinutes
のデフォルト値は30
です。つまり、メディアチャネルをクリックした後でWebページを開くと、Webページを開いてから30秒以内にイベントが発生した場合に限り、「ディープリンクオープン(アプリ)」イベントがメディアチャネルにクレジットされます。protectedAttributionWindowInMinutes
は最大4320
(3日)まで設定することができます。
ユーザーが他のWebサイトに移動する場合、sendWeb
メソッドを使用します。移動したウェブサイトにもAirbridge Web SDKがインストールされていれば、ユーザージャーニーを繋いでアトリビューションの成果を分析することができます。
useProtectedAttributionWindow
は、アトリビューションを接続するためにAirbridge SDKを初期化する際にtrueに設定する必要があります。保護されたアトリビューションウィンドウを参照してください。
// 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を使用して、Airbridge 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のロゴが適切に記録されていることを確認します。
このページは役に立ちましたか?
// 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)
})
airbridge.setBanner({
title: 'AirStyle',
description: 'Find your perfect style!!',
keyColor: '#00a0c6',
position: 1
})
// 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',
}
});
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
});
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
urlQueryMapping: {
channel: 'utm_source',
campaign: 'utm_campaign',
sub_id_1: 'internal_code',
},
})
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
})
airbridge.events.send('category')
airbridge.events.wait(3000, function (error) {
location.href = 'url'
})
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
useProtectedAttributionWindow: true,
protectedAttributionWindowInMinutes: 60,
});
airbridge.clearUser()
// initialize
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
shareCookieSubdomain: false,
})