On this page

For AI agents: a documentation index is available at /docs/llms.txt. Append .md to any page URL for markdown, or send Accept: text/markdown.

マーケティング分析SDK

npmv1.0.2125.1 kB gzip

Marketing Analytics Browser SDKは、Browser SDKを拡張して、マーケティングチャネルに基づいてユーザーとイベントを識別します。このライブラリはオープンソースです。 ソースはGitHubで確認してください。

これはメンテナンス SDK であり、廃止されるまでバグ修正のみを受け取ります。 Amplitude Browser SDKの改良版が利用できるようになりました。 Amplitude Browser SDK 2.0は、デフォルトのイベントトラッキング、改善されたマーケティングアトリビューショントラッキング、簡素化されたインターフェイス、軽量なパッケージを特徴としています。Amplitudeは、プロダクト分析とマーケティング分析の両方のユースケースにブラウザSDK 2.0を推奨しています。最新のブラウザ SDK 2.0 にアップグレードします。

SDKをインストールする

マーケティング分析ブラウザSDKの使用を開始するには、npmまたはスクリプトローダーを使用してパッケージをプロジェクトにインストールします。

ノードパッケージをインストールする

npm install @amplitude/marketing-analytics-browser

スクリプトローダーを使用してインストールする

Amplitudeはまた、このパッケージをCDN経由で配布しています。 このスクリプトをコピーしてHTMLファイルに貼り付けます。

plaintext
<script type="text/javascript">
!function(){"use strict";!function(e,t){var r=e.amplitude||{_q:[],_iq:[]};if(r.invoked)e.console&&console.error&&console.error("Amplitude snippet has been loaded.");else{var n=function(e,t){e.prototype[t]=function(){return this._q.push({name:t,args:Array.prototype.slice.call(arguments,0)}),this}},s=function(e,t,r){return function(n){e._q.push({name:t,args:Array.prototype.slice.call(r,0),resolve:n})}},o=function(e,t,r){e[t]=function(){if(r)return{promise:new Promise(s(e,t,Array.prototype.slice.call(arguments)))}}},i=function(e){for(var t=0;t<m.length;t++)o(e,m[t],!1);for(var r=0;r<y.length;r++)o(e,y[r],!0)};r.invoked=!0;var a=t.createElement("script");a.type="text/javascript",a.integrity="sha384-PPfHw98myKtJkA9OdPBMQ6n8yvUaYk0EyUQccFSIQGmB05K6aAMZwvv8z50a5hT2",a.crossOrigin="anonymous",a.async=!0,a.src="https://cdn.amplitude.com/libs/marketing-analytics-browser-0.3.2-min.js.gz",a.onload=function(){e.amplitude.runQueuedFunctions||console.log("[Amplitude] Error: could not load SDK")};var c=t.getElementsByTagName("script")[0];c.parentNode.insertBefore(a,c);for(var u=function(){return this._q=[],this},p=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove","getUserProperties"],l=0;l<p.length;l++)n(u,p[l]);r.Identify=u;for(var d=function(){return this._q=[],this},v=["getEventProperties","setProductId","setQuantity","setPrice","setRevenue","setRevenueType","setEventProperties"],f=0;f<v.length;f++)n(d,v[f]);r.Revenue=d;var m=["getDeviceId","setDeviceId","getSessionId","setSessionId","getUserId","setUserId","setOptOut","setTransport","reset"],y=["init","add","remove","track","logEvent","identify","groupIdentify","setGroup","revenue","flush"];i(r),r.createInstance=function(){var e=r._iq.push({_q:[]})-1;return i(r._iq[e]),r._iq[e]},e.amplitude=r}}(window,document)}();
amplitude.init("YOUR_API_KEY_HERE");
</script>

設定

マーケティング分析SDKは、ウェブアトリビューションとページビュートラッキングを設定するための次のオプションをサポートしています。

バッチ処理の動作を設定する

高パフォーマンス環境をサポートするために、SDK はイベントをバッチで送信します。 SDK は、track メソッドによって記録されたすべてのイベントをメモリ内でキューイングします。SDKはバックグラウンドで、イベントをバッチ単位でフラッシュします。flushQueueSizeおよびflushIntervalMillisを使用してバッチ動作をカスタマイズできます。 デフォルトでは、serverUrlhttps://api2.amplitude.com/2/httpapiです。一度に大量のデータを送信するには、useBatchtrueに設定し、setServerUrlをバッチイベントアップロードAPIであるhttps://api2.amplitude.com/batchに設定します。通常モードとバッチモードの両方で、同じイベントアップロードしきい値とフラッシュ時間間隔を使用します。

ts
amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  // Events queued in memory will flush when number of events exceed upload threshold
  // Default value is 30
  flushQueueSize: 50,
  // Events queue will flush every certain milliseconds based on setting
  // Default value is 10000 milliseconds
  flushIntervalMillis: 20000,
  // Using batch mode with batch API endpoint, `https://api2.amplitude.com/batch`
  useBatch: true,
});

EU域内のデータレジデンシー

クライアントを初期化してAmplitudeのEUサーバーにデータを送信するときにサーバーゾーンを設定します。 SDKは、設定されている場合にサーバーゾーンに基づいてデータを送信します。

EUデータレジデンシーの場合、プロジェクトはAmplitude EU内に設定する必要があります。 SDKは、Amplitude EUから提供されたAPIキーを使用して初期化する必要があります。

ts
amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  serverZone: "EU",
});

マーケティング アトリビューション

Amplitudeはマーケティングアトリビューションを追跡し、UTM、リファラー、クリックIDのパラメータを使用してユーザーのトラフィックソースを特定します。

UTMパラメータ

UTM(Urchin Traffic Monitor)パラメータは、さまざまな広告キャンペーンや参照サイトの効果を分析するのに役立ちます。UTMパラメータは大文字と小文字を区別するため、Amplitudeは大文字が異なる場合にこれらのパラメータを異なる値として扱います。

標準UTMパラメータには次の5種類があります。

UTMパラメータを使用したURLの例を次に示します。

https://www.amplitude.com/?utm_source=newsletter&utm_campaign=product_analytics_playbook&utm_medium=email&utm_term=product%20analytics&utm_content=banner-link

リファラーパラメータ

リファラーは、送信先ページにリンクされているページのURLです。Amplitudeは以下のパラメータを追跡します。

ユーザーが送信先ページに直接移動した場合、リファラは空文字列 ('') です。

クリックIDパラメータ

クリックIDは、URLクエリパラメータとして含まれているキャンペーン識別子です。 広告プラットフォームはこれらのIDを使用してキャンペーンやその他の属性を識別します。AmplitudeはクリックIDに関連付けられたその他のキャンペーン属性にアクセスすることはできませんが、Amplitudeは次の表に示すクリックID値を追跡できます。

ファーストタッチのアトリビューション

Amplitudeは、最初のセッション開始時に初期アトリビューションデータを取得します。 Amplitudeは、ユーザーのアトリビューションデータを初めて確認したときに、ファーストタッチのアトリビューション値を設定します。 Amplitudeは以下のユーザープロパティを1回設定します。

  • initial_utm_source
  • initial_utm_medium
  • initial_utm_campaign
  • initial_utm_term
  • initial_utm_content
  • initial_referrer
  • initial_referring_domain
  • initial_gclid
  • initial_fbclid
  • initial_dclid
  • initial_gbraid
  • initial_ko_click_id
  • initial_msclkid
  • initial_ttclid
  • initial_twclid
  • initial_wbraid
  • initial_li_fat_id
  • initial_rdt_cid

マルチタッチアトリビューション

Amplitudeは各セッションの開始時にアトリビューションデータを取得し、それらの値をユーザープロパティとして設定します。 オーガニックまたは直接のトラフィックの場合、これらのプロパティは使用できない場合があります。 その場合、AmplitudeはこれらのユーザープロパティをユーザーIDから解除します。

新しいキャンペーンごとに(Amplitude が新しいアトリビューションデータを確認したとき)、Amplitude はユーザーセッションの状態に関係なくその変更を取得します。新しいキャンペーンごとにセッションをリセットするようにresetSessionOnNewCampaigntrueに設定します。デフォルトの動作では、新しいキャンペーンでセッションがリセットされることはありません。

Amplitudeはユーザープロパティとして以下のことを追跡します:

  • utm_source
  • utm_medium
  • utm_campaign
  • utm_term
  • utm_content
  • referrer
  • referring_domain
  • gclid
  • fbclid
  • dclid
  • gbraid
  • ko_click_id
  • msclkid
  • ttclid
  • twclid
  • wbraid
  • li_fat_id
  • rdt_cid

最初にページを直接または自然に訪問したユーザーの場合、初期値はデフォルトで "EMPTY" になります。 別の初期値を使用するには、attribution.initialEmptyValueを任意の文字列値に設定してください。

ts
amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  attribution: {
    initialEmptyValue: "none",
  },
});

特定のドメインからリファラーを除外する

特定のリファラーリストに対するアトリビューションデータの収集をオプトアウトするようにAmplitudeを設定します。

ts
amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  attribution: {
    excludeReferrers: ["www.test.com"],
  },
});

新しいキャンペーンでセッションをリセットする

attribution.resetSessionOnNewCampaignに設定することで、キャンペーンパラメータが変更された場合に新しいセッションを開始するようにAmplitudeを設定できますtrue。 デフォルトでは、attribution.resetSessionOnNewCampaignfalseです。

ts
amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  attribution: {
    resetSessionOnNewCampaign: true,
  },
});

アトリビューショントラッキングを無効にする

自動アトリビューションデータの収集をオプトアウトするには、attributattribution.disabledion.disabledtrutrueeに設定します。デフォルトでは、attribution.disabledfalseです。

ts
amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  attribution: {
    disabled: true,
  },
});

ページビュー

pageViewTrackingに設定することでページビュートラッキングを有効化できますtrue。 SDKはページが読み込まれるとページビューイベントを発行します。

ts
amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  pageViewTracking: true,
});

詳細なオプションを渡すには、pageViewTrackingをオブジェクトに設定します。

アトリビューションが変更された場合のページビューイベントのトラッキング

アトリビューション情報が変更された場合にのみページビューイベントを送信するように、trackOnオプションを'attribution'に設定します。

ts
amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  pageViewTracking: {
    trackOn: "attribution",
  },
});

特定の基準に基づいてページビューイベントをトラッキング

また、trackOnを関数コールバックに設定して、SDKがページビューイベントを送信するタイミングを完全にカスタマイズすることもできます。

ts
amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  pageViewTracking: {
    trackOn: () => {
      return window.location.pathname === "/landing_page";
    },
  },
});

シングルページアプリのページビュートラッキング

react-routerなどの履歴ベースのルーターを使用するシングルページアプリがある場合は、ユーザーがページ間を移動するときにページビューイベントを送信できるようにtrackHistoryChangesを有効にしてください。 trackHistoryChangesに指定できる値:

パスの変更のみを追跡するようにtrackHistoryChangespathOnlyに設定します。デフォルトでは、SDKはページビューの変更を確認する際にページ全体のURLを考慮します。

ts
amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  pageViewTracking: {
    trackHistoryChanges: "pathOnly", // or 'all'
  },
});

SDKはページビューイベントで以下の情報を追跡します。

マーケティング分析SDKをAmpliと併用する

このSDKでAmpliを使用するには、Marketing Analytics SDKのインスタンスをampli.load()に渡します。

  1. マーケティング分析ブラウザSDKをプロジェクトに追加します。
  2. SDK のインスタンスを作成します。
  3. インスタンスを ampli.load() に渡します。

この例では、「Amplitude」インスタンスを ampli.loadに渡しています。

ts
amplitude.init(REACT_APP_AMPLITUDE_API_KEY, undefined, {
  ...DefaultConfiguration,
  logLevel: 3,
});
ampli.load({
  client: {
    instance: amplitude,
  },
});

Was this helpful?