OneLink Smart Script V2

概要:自動的に生成されたOneLinkをカスタマイズし、ブランドのWebサイト上のボタンやバナーに埋め込みましょう。

OneLinkスマートスクリプトについて

OneLinkスマートスクリプトは、Webページへ誘導するURLを使用して、アプリストアへ誘導する一意のOneLink URLを自動的に生成します。

The outgoing URLs are generated using arguments you receive from the marketer and input into the script. Note: The afParameters argument has a structure made up of several other arguments (parameters), each of which contains a configuration object that has keys, override values, and a default value.

実装ステップ

スマートスクリプトを設定するには、以下の方法があります。

Embed the script in your website

スマートスクリプトの初期化および呼び出しコードは、 AppsFlyer管理画面のスマートスクリプト生成ツールから取得する(推奨)ことも、開発者が手動でインポートして呼び出すこともできます。

📘

受信URLパラメータを保存する

受信したURLパラメータを生成されたOneLinkに確実にマッピングするために、OneLinkがページ内に生成されているかどうかにかかわらず、すべてのWebサイトページでSmart Scriptをインポートすることをお勧めします。

Smart Scriptバージョン2.5.0以降で利用可能です。

詳細と具体的な例はこちらを参照してください。

スマートスクリプト生成ツールを使用して実装する

  1. マーケティング担当者から、スクリプト、初期化コード、および引数を含むファイルを取得します。
  2. スマートスクリプトのテストページでスクリプトをテストし、正しい送信URLが生成されていることを確認します。
  3. スマートスクリプトの結果のテスト/使用手順 に従って進めてください。

Githubの実装例をご参照ください。

スクリプトを手動で実装する

  1. スクリプトをダウンロードしてください。
  2. マーケティング担当者から、受信パラメータと送信パラメータをどうマッピングするかのリストを受け取ります。
  3. スマートスクリプトの引数オブジェクト構成を初期化してください。
  4. Web/ランディングページのHTML内のスクリプトを以下の方法で呼び出し、URLSを生成してください:
var result = window.AF_SMART_SCRIPT.generateOneLinkURL({
  oneLinkURL,
  afParameters,
  referrerSkipList, // optional
  urlSkipList // optional
})
  1. スマートスクリプトの結果のテスト/使用手順 に従って進めてください。

スマートスクリプトの結果を確認して使用する

  1. Check the return value in result. Possible return values are:
    • 送信用OneLink URL:必要に応じて結果の値を使用します。
      例:WebサイトのCTA(アプリダウンロード)URLにリンクとして配置する、など
    • null. If the script returns null, implement your desired error flow. For example: the web/landing page's existing URL is not changed.
      var result_url = "No output from script"
      if (result) {
            result_url = result.clickURL;            
            // Put the generated OneLink URL behind CTA buttons
            document.getElementById('andrd_link').setAttribute('href', result_url);
            document.getElementById('ios_link').setAttribute('href', result_url);
            // Optionally - Create QR code from the generated OneLink URL
            window.AF_SMART_SCRIPT.displayQrCode("my_qr_code_div_id");
            //The size of the QR code is defined in the CSS file under #my_qr_code_div_id
            // #my_qr_code_div_id canvas { 
            //  height: 200px;
            //  width: 200px;
            //}
            // Optionally - fire an impression.
            // The impression will fire to https://impressions.onelink.me//.... 
            setTimeout(() => {
              window.AF_SMART_SCRIPT.fireImpressionsLink();
              console.log("Impression fired"); 
            }, 1000);
      }

Use Google Tag Manager

Google Tag Managerでスマートスクリプトを設定する方法:

  1. マーケティング担当者が指示に従って、スマートスクリプトのコードをGTMに設定したことを確認します。
  2. Check the return value in AF_SMART_SCRIPT_RESULT. Possible return values are:
    • 送信用OneLink URL:必要に応じて結果の値を使用します。
      例:WebサイトのCTA(アプリダウンロード)URLにリンクとして配置する、など
    • null. If the script returns null, implement your desired error flow. For example: the web/landing page's existing URL is not changed.
      var result_url = AF_SMART_SCRIPT_RESULT.clickURL;
      if (result_url) {
            document.getElementById('andrd_link').setAttribute('href', result_url);
            document.getElementById('ios_link').setAttribute('href', result_url);
            // Optionally - Create QR code from the generated OneLink URL
            window.AF_SMART_SCRIPT.displayQrCode("my_qr_code_div_id");
            //The size of the QR code is defined in the CSS file under #my_qr_code_div_id
            // #my_qr_code_div_id canvas { 
            //  height: 200px;
            //  width: 200px;
            //}
            // Optionally - fire an impression.
            // The impression will fire to https://impressions.onelink.me//.... 
            setTimeout(() => {
              window.AF_SMART_SCRIPT.fireImpressionsLink();
              console.log("Impression fired"); 
            }, 1000);            
      }
  1. スマートスクリプトのテストページでスクリプトをテストし、正しい送信URLが生成されていることを確認します。

Create a QR code with the Smart Script result

前提条件: スマートスクリプト V2.6+以降の実装

📘

推奨:

  • アプリのブランドに応じて、中央のロゴとQRコードの色を変更してQRコードをカスタマイズします。
  • ユーザーがデスクトップでアクセスしている際にはQRコードを表示し、ユーザーがモバイルにいるときはリンク付きのボタンを表示します。

QRコードを作成する方法

  1. サイトのHTMLページに特定のIDを持つ div タグを作成して QRコードをホストしてください。
    div タグのスタイルは、好きなように設定できます。
  2. スマートスクリプトを実行してOneLink URLを生成したら、次のメソッドを呼び出します: displayQrCode

displayQrCode


メソッドのシグネチャ

const qrOptions = {
  logo,
  colorCode
}

window.AF_SMART_SCRIPT.displayQrCode(divId, qrOptions)

引数の入力

タイプ必須名前詳細コメント
StringはいdivIDA div HTMLページに特定のIDを持つタグを作成して QRコードをホストしてください。
ObjectいいえqrOptionsConfiguration object (see details in the table below)If the object is missing, the QR code will be created without a logo in default color

qrOptions object

タイプ必須名前詳細コメント
StringいいえlogoA valid image URL or an image data-URIIf the value is invalid, the QR code will be generated without the logo
StringいいえcolorCodeHex color of the QR codeIf the value is invalid, the code color will fallback to the default black color

使用例:

Fire an impression

インプレッションは、ページの読み込み時、CTAやバナーの表示時などに発生させることができます。
注意: インプレッションはモバイル端末でのみ発生させることができます。デスクトップ上では発火されません。

前提条件: スマートスクリプト V2.2+

インプレッションを発火させるには:

  1. 指示に従ってスマートスクリプトを実行し、クリックURLを生成します。
  2. 結果が有効である(null ではない)ことを確認してください。
  3. 次のインプレッションファンクションを実行します:

🚧

必須の回避策

呼び出しをラップしてください fireImpressionsLink with setTimeout 呼び出しの間に少なくとも 1 秒の遅延があることを確認するには generateOneLinkURL and fireImpressionsLink

setTimeout(() => {
  window.AF_SMART_SCRIPT.fireImpressionsLink();
  console.log("Impression fired"); 
}, 1000);

You can find examples for firing impressions for mobile only and for cross platform support

引数

Argument 備考
oneLinkURL (必須)
  • OneLinkテンプレートのドメインと、テンプレートのIDを提供してください。注意:OneLinkカスタムリンクのURLではありません。
  • yourbrand.onelink.me/A1b2
  • ブランドドメインの例:click.yourbrand.com/A1b2

afParameters

(必須)

 

 

 


mediaSource

(必須)

メディアソースのオブジェクト構成

  • Keys: ['incoming_mediasource’' 'utm_source']
  • オーバーライド値:{twitter: 'twitter_int', orig_src: 'new_src'}
  • デフォルト値: ['any_source']

campaign

キャンペーンのオブジェクト構成

  • Keys: ['incoming_campaign', 'utm_campaign']
  • オーバーライド値: {campaign_name: 'new_campaign_name'}
  • デフォルト値: ['any_campaign_name']

channel

チャネルのオブジェクト構成

  • Keys: ['incoming_channel', 'utm_channel']
  • オーバーライド値: {video: 'new_video'}
  • デフォルト値: ['any_video']

ad

広告のオブジェクト構成

  • Keys: ['incoming_ad', 'utm_ad']
  • オーバーライド値: {ad_name: 'new_ad_name'}
  • デフォルト値: ['any_ad_name']
adSet

広告セットのオブジェクト構成

  • Keys: ['incoming_adset', 'utm_adset']
  • オーバーライド値: {'adset_name': 'new_adset_name'}
  • デフォルト値: ['any_adset_name']
deepLinkValue

deep_link_value のオブジェクト構成

  • Keys: ['product_id', 'page_name']
  • オーバーライド値: {twenty_percent_off: 'thirty_percent_off'}
  • デフォルト値: 'new_offers_page'
afSub1-5

af_sub[1-5] のオブジェクト構成

 
googleClickIdKey

Smart Script automatically maps the incoming GCLID parameter value to the outgoing GCLID parameter: gclid={gclid}.
Note! To display in AppsFlyer raw data reports, the param must be one of af_sub[1-5].

 
他の(カスタム)クエリパラメーター
  • アトリビューションやディープリンクのために、送信URLに含めたいその他のパラメータを、その構成オブジェクトとともにリストアップします。
  • カスタムパラメータの名前は、開発者が設定オブジェクトの paramKey としてリストアップします。
  • paramKey: 'deep_link_sub1'
  • Keys: ['page_id']
  • オーバーライド値: {page12: 'new_page12'}
  • Default value: 'page1'
 
referrerSkipList
特定のクリック(TwitterやFacebookなど)のHTTPリファラーに含まれる文字列のリストで、これが見つかった場合、スマートスクリプトは null を返します。この機能は、TwitterやFacebookのような、既にクリックの計測が行われているSRN媒体の場合などに有効です。  
urlSkipList 特定のクリックに対するURLに含まれる文字列(例:af_r)のうち、見つかった場合にスマートスクリプトが以下を返す文字列: null。これは、af_r を含むAppsFlyer計測リンクを使用してユーザーをモバイルサイトにリダイレクトし、元のクリックのデータが失われないようにしたい場合に便利です。  
webReferrer This argument defines a key in the outgoing URL, which its value will be a copy of the HTTP document.referrer. The referrer is saved in the first page the user lands in, and may be used in any consecutive page in this domain which runs Smart Script with this argument.  

オブジェクトの構成

OneLinkスマートスクリプトは、受信URLのパラメータとスクリプトに定義された引数を用いて、送信URLを生成します。afParameters 引数は、アトリビューションやディープリンクに使用される他のいくつかの引数(パラメータ)で構成される構造を持っており、それぞれの引数には、次の表に示すように、キー、オーバーライド(上書き)値、デフォルト値を持つオブジェクト構成が含まれています。

Argument 詳細
keys
  • 文字列の一覧
  • スクリプトが検索する受信URLに含まれる可能性のあるパラメータのリストで、その値が送信URLの値として配置されます。
  • スクリプトは左から右に向かって検索し、最初にマッチしたところで停止します。
  • 例: ['in_channel', 'utm_channel']
  • スクリプトのchannelパラメータでは、受信URLのin_channelを検索して、その値をchannelの値として使用します。

overrideValues

  • Dictionary {string: string}
  • 送信URLで変更したい値は、受信URLでの値と、置き換えたい値を列挙してください。
  • スクリプトは、受信URLに含まれるパラメータ値を、あなたが定義した値に置き換えます。 

例: {'video': 'video_new'}

スクリプトのchannel パラメータは、受信値が video の場合、スクリプトが送信URLにおいて video_new に変更します。

defaultValue
  • 文字列
  • "フォールバック" の値を何にするかを記載します。
  • キーリストからパラメータが見つからない場合は、送信URLにdefaultValueの値が使用されます。
  • 空のキーリストを渡すことで、強制的にデフォルト値を設定することができます。

例: ['web_video']

スクリプトのchannelパラメータについては、パラメータ in_channel が見つからない場合、web_videoがchannelの値として使用されます。

Basic attribution

media_source と campaignに単一のキーを使用している、受信URLから送信OneLink URLへの基本的な変換のを参照してください。

Multiple keys

media_source と campaignに複数のキーを使用している、受信URLから送信OneLink URLへの変換のを参照してください。

UTM parameters

media_source と campaignにUTMパラメーターを使用している、受信URLから送信OneLink URLへの基本的な変換のを参照してください。

Override values

受信 media_source の値を置き換えている、受信URLから送信OneLink URLへ変換のを参照してください。

Default values

受信した media_source の値が見つからない場合に、デフォルト値を使用している受信URLから送信OneLink URLへの変換のを参照してください。

Forced default values

受信 media_source の値が見つかった場合でも、デフォルト値を使用している、受信URLから送信OneLink URLへの基本的な変換のを参照してください。

Google click ID passthrough

See example of the conversion of an incoming URL to an outgoing OneLink URL that passes the Google click ID to af_sub4 and gclid.
As of Smart Script version 2.8.1, the GCLID is automatically forwarded to the outgoing URL when present in the incoming URL.
Note: When a GCLID is detected, the script searches for the incoming keyword parameter, and inserts its value into the outgoing URL as the value for the af_keywords パラメーター

Facebook click ID passthrough

See example of the conversion of an incoming URL to an outgoing OneLink URL that passes the Facebook click ID to af_sub2 and fbclid.
As of Smart Script version 2.8.1, the FBCLID is automatically forwarded to the outgoing URL when present in the incoming URL.

Set attribution and OneLink parameters

AppsFlyerのアトリビューションとOneLinkパラメータを使用して、受信URLを送信OneLink URLに変換しているを参照してください。

Set additional custom parameters

See example of the conversion of an incoming URL to an outgoing OneLink URL with additional custom parameters.

Referrer skip list

特定のクリック(例えば、TwitterまたはFacebook)に対してスマートスクリプトを無効にする方法について例を参照してください。クリックのHTTPリファラにスキップリストの文字列が含まれている場合、スマートスクリプトは https://appsflyersdk.github.io/appsflyer-onelink-smart-script/examples/referrer_skip_list.html?incmp=gogo&inmedia=email を返します。 null.

URL skip list

See example of how you can disable the Smart Script for a particular string in the URL (for example, af_r) by creating a skip list. If any of the strings in the skip list appear in the URL of the click, the Smart Script returns null.

Smart Script set up with Google Tag Manager

Google Tag Managerを使ったOneLinkスマートスクリプトの設定を使用した場合の受信URLから送信OneLink URLへの変換のを参照してください。

Impressions - OneLink Template with mobile-only support

モバイルデバイスのみを持つOneLinkテンプレートを使用して発生したインプレッションの をご覧ください。

🚧

必須の回避策

呼び出しをラップしてください fireImpressionsLink with setTimeout 呼び出しの間に少なくとも 1 秒の遅延があることを確認するには generateOneLinkURL and fireImpressionsLink

Impressions - OneLink Template with Cross-platform support

クロスプラットフォームをサポートしているOneLinkテンプレートを使用して発生したインプレッションの をご覧ください。
参照:モバイル以外のプラットフォーム(PCやコンソールなど)から発生したインプレッションの例

📘

Firing an impression from a cross platform landing page

You can find here a code example for firing an impression from a demo landing page

🚧

必須の回避策

呼び出しをラップしてください fireImpressionsLink with setTimeout 呼び出しの間に少なくとも 1 秒の遅延があることを確認するには generateOneLinkURL and fireImpressionsLink

Preserve incoming URL parameters across pages

📘

Smart Scriptバージョン2.5.0以降で利用可能です。

ランディングページの受信パラメータ(例: utm_source{0})は、デフォルトではWebサイト内の他のページに渡されません。すべての Web サイトページにスマートスクリプトをインポートすると、受信URLパラメータが保持され、スマートスクリプトが他のページで使用できるようになります。

このユースケースの例についてはこちらをご覧ください。

Copy HTTP referrer to outgoing URL

📘

Available from version 2.7.0.

You can set Smart Script to copy the HTTP document.referrer to either a custom outgoing URL parameter or predefined outgoing URL parameters. If you want to see web referrer values in dashboards or in raw data reports, we suggest using one of the following predefined outgoing URL parameters:

  • af_channel - Parameter is available in dashboards and raw data
  • af_sub1-5 - The parameter is available in raw data under the af_sub1-5 columns and in the original URL column.

If you want to set a custom parameter, Smart Script has to copy the  document.referrer property value and set it as the value of the parameter. In this example, Smart Script copies the document.referrer value to a custom outgoing URL parameter key defined by webReferrer. The selected custom key in the example is this_referrer.

For more information, see Web referrer mapping.

Utilizing Local Storage to Set Parameters for Deep Linking

You can choose to save any data from the website to local storage, and then configure Smart Script to retrieve this data and assign it to an outgoing URL parameter. For example, you can leverage website information to dynamically populate the deep_link_value parameter, enabling the deep linking of users directly to the app's relevant content.

In this example, you can see how the outgoing URL deep_link_value is populated by a value copied from the website's local storage. The copied value in this example is the product ID arriving from the website data.