Web SDK

    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(){h.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 k(){a_.removeEventListener("load",k);i_.head.appendChild(c)})},h={queue:[],get isSDKEnabled(){return!1}};_i.concat(_d).forEach(function(c){var a=c.split("."),k=a.pop();a.reduce(function(p,q){return p[q]=p[q]||{}},h)[k]=function(){h.queue.push([c,arguments])}});a_[_b]=h;"undefined"!==typeof i_.documentMode&&(_r=_r.replace(/^https:/,""));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","https://static.airbridge.io/sdk/latest/airbridge.min.js","init startTracking stopTracking 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","fetchResource","createTouchpoint","createTrackingLink"],0);
    
    airbridge.init({
        app: '<YOUR_APP_NAME>',
        webToken: '<YOUR_WEB_TOKEN>',
    })
    </script>

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

    Protected Attribution Window setup

    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', 'John Doe')

    テスト

    ユーザー情報の設定値が、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: 'my_sub_id',
        },
    })

    上記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: false, // Default true
    })

    イベント送信の遅延

    イベントの送信が完了する前にリダイレクトが発生した場合(リレーページからイベントを送信など)、データが消失する可能性があります。リダイレクトされる前にイベントを確実に送信するには、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が呼び出されるまでイベントは送信されません。

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

    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のロゴが適切に記録されていることを確認します。

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

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