• デベロッパーガイド
  • SDK Integration
  • Web SDK

Web SDK

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

SDKの実装ガイド


SDKのインストール

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

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

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

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

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

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

Shell
1
npm install airbridge-web-sdk-loader
  1. airbridgeをインポートして、airbridge.init関数を呼び出します。

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

airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_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が呼び出されるまでユーザー情報とともに送信されます。

1234567891011121314151617
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',
        },
    },
})

属性

説明

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など)とのマッチングに使用されるユーザーのエイリアスを設定することもできます。

12
airbridge.setUserAlias('amplitude_id', '12345678')
airbridge.setUserAlias('braze_ext_id', '87654321')

ユーザー属性の設定

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

123
airbridge.setUserAttribute('age', 45)
airbridge.setUserAttribute('gender', 'male')
airbridge.setUserAttribute('name', 'Gildong Hong')

テスト

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

  1. ユーザー識別子の情報を設定します。

  2. SDKを使用して、イベントを送信します。

  3. 「Airbridgeダッシュボード → Raw Data → Web Real-time Logs」を選択して、イベントをクリックします。

  4. ユーザー情報が、userブロックの下に正しく送信されているかを確認します。

デバイス設定


デバイスの識別子の設定

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

123
airbridge.setDeviceAlias('YOUR_KEY', 'YOUR_VALUE')
airbridge.removeDeviceAlias('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

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

-

-

アプリ内での購入製品

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から適切に送信されていることを確認します。

  1. SDKを使用して、イベントを送信します。

  2. 「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パラメータは解析されません。

123456
airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_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_sourceutm_campaigninternal_codeなどのカスタムパラメータを使用すると、URLは以下のような構造になります。

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

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

12345678910
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関数の呼び出し時に情報を登録します。

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: '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メソッドを使用します。

1
airbridge.clearUser()

ユーザー情報の暗号化

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

123456
airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
    // ...
    userHash: true, // Default false
})

イベント送信の遅延

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

パラメータ

説明

timeout

Number

最大待ち時間(ミリ秒)

callback

(error: string) => void

イベント送信時にコールバック

1234567891011
airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
    // ...
})

airbridge.events.send('category')

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

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

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

123456789101112131415
// 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,
})

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

Cookie共有オプション

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

1234567
// 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の初期化時にautoStartTrackingEnabledfalseに設定されている場合、airbridge.startTrackingが呼び出されるまでイベントは送信されません。

12345678
airbridge.init({
    app: 'YOUR_APP_NAME',
    webToken: 'YOUR_WEB_TOKEN',
    // ...
    autoStartTrackingEnabled: false,
})

airbridge.startTracking()

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

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

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

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

状況

デフォルトのコントリビューションチャネル

保護されたアトリビューションウィンドウを使用する際のコントリビューションチャネル

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: 'YOUR_APP_NAME',
    webToken: 'YOUR_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をインストールする場合、以下の手順に従ってください。

  1. 「Workspace Overview」の「New Tag」をクリックする、またはコンテナ内で「Tag → New」を選択します。

  2. 「Tag Configuration → Custom Settings」で「Custom HTML」を選択します。

  3. 下図に示すように、「HTML」セクションにAirbridge SDK codeのコードを挿入します。

  4. 「Tag Configuration → Advanced Settings → Tag firing priority」を選択して、0より大きい数値(9999など)を入力します。

  5. 「Tag Configuration → Advanced Settings → Tag firing Options」で「Once per page」を選択します。

  6. 「Trigger」を「Pageview - DOM Ready」に設定します。

  7. タグの作成が完了したら、送信ボタンを押します。

  8. 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.

  1. 「Workspace Overview」の「New Tag」をクリックする、またはコンテナ内で「Tag → New」を選択します。

  2. 「Tag Configuration → Custom Settings」で「Custom HTML」を選択します。

  3. 下図に示すように、「HTML」セクションに追跡するイベントのコードを挿入します。

  4. イベントに応じて、「Advanced Settings > Tag firing options」で「Unlimited」、「Once per event」、「Once per page」を選択します。

  5. イベントに適切なトリガーを設定します。

  6. タグの作成が完了したら、送信ボタンを押します。

  7. リアルタイムロゴの下にあるAirbridgeダッシュボードで、SDKのロゴが適切に記録されていることを確認します。

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

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