ピクセルサービス統合ガイド

このページでは、Roktピクセルサービスを実装してコンバージョンをキャンペーンと接続する方法を説明します。ピクセルサービスは、Rokt Web SDKがオプションでない場合のフォールバックとして意図されています。一般的な例としては、金融サービスや医療などの規制産業の広告主が、サードパーティのJavaScript実行をブロックする厳しいコンテンツセキュリティポリシー（CSP）を施行しているが、画像リクエストは許可されている場合があります。

専任のRoktアカウントマネージャーが、ピクセルサービスのためのアカウント設定を支援します。彼らは必要なAPIキーと必要な追加リソースを提供します。

注記

以下の指示を完了するには開発リソースが必要です。さらに支援が必要な場合は、Roktアカウントマネージャーにお問い合わせください。

ピクセルサービスへのすべてのリクエストは、HTTP GETリクエストとして行われます:

https://pixels.mparticle.com/v1/{api_key}/Pixel

ここで、{api_key}は、アカウントマネージャーから提供されたRokt APIキーです。

1. ページビューのトラッキング1. ページビューのトラッキングへの直接リンク

ページビューをトラッキングするには、各ページロード時にピクセルリクエストを送信します。リクエストをページの<head>に配置するか、ページがロードされるとすぐにJavaScriptから発火させます。

1.1 Rokt APIキーを入力1.1 Rokt APIキーを入力への直接リンク

URL内の{api_key}を、専任のRoktアカウントマネージャーから提供されたRokt APIキーに置き換えます。

Rokt APIキーは、Roktピクセルサービスと安全に接続し、やり取りを可能にするために、Roktアカウントマネージャーから提供されるユニークな資格情報です。

注記

ピクセルサービスは、サードパーティのJavaScriptをブロックするコンテンツセキュリティポリシー（CSP）がある組織を対象としています。組織にこの制限がない場合は、より豊富な機能を提供するRokt Web SDKを使用してください。

1.2 ユーザーの識別1.2 ユーザーの識別への直接リンク

Roktは、ファネルイベントを結びつけるために、すべてのピクセル呼び出しにわたって一貫したユーザー識別子を必要とします。これがないと、各ページビューは別の匿名ユーザーとして扱われ、ファネルの進行を追跡したり、高い意図を示したがコンバージョンしなかったユーザーのリターゲティングオーディエンスを構築することが不可能になります。

ユーザー識別情報を、カンマ区切りのui_t（識別子タイプキー）およびui_v（識別子タイプ値）パラメータを使用して渡します。

既知のユーザー（メールが利用可能）

ユーザーがメールアドレスを提供している場合、永続的な匿名識別子とメールの両方を渡して、Roktが以前の匿名ページビューを現在の既知のユーザーにリンクできるようにします:

ハッシュされていないメール: ui_t=other3,email
SHA-256ハッシュされたメール: ui_t=other3,other

ui_t=other3,email&ui_v={sessionId},j.smith%40example.com

匿名ユーザー（PIIが利用できない）

ユーザーがPIIを提供していない場合 — 例えば、アプリケーションファネルをログインせずに閲覧しているユーザー — でも、永続的な識別子を渡して、Roktが訪問中および再訪問時のすべてのページビューイベントを結びつけることができるようにする必要があります。

ユーザーが最初に到着したときにユニークIDを生成し、それをlocalStorageに保持して、将来の訪問時に再利用します。すべてのピクセル呼び出しでui_t=other3を使用して渡します:

function getSessionId() {
  let sessionId = localStorage.getItem('rokt_session_id');
  if (!sessionId) {
    sessionId = crypto.randomUUID();
    localStorage.setItem('rokt_session_id', sessionId);
  }
  return sessionId;
}

ui_t=other3&ui_v={sessionId}

注記

localStorageに保存されている識別子は、実際のユーザーの身元に結びついているわけではありません。これは、訪問をまたいで持続する安定した匿名IDであり、再訪問したユーザーが新しいユーザーではなく同じユーザーとして認識されるようにします。ユーザーが後でメールアドレスを提供した場合（例えば、コンバージョン確認ページで）、両方の識別子を含めて、Roktが以前の匿名活動を現在知られているユーザーに関連付けることができるようにします:

ui_t=other3,email&ui_v={sessionId},j.smith%40example.com

このパターンは、コンバージョンしない匿名ユーザーに対して2つの結果を可能にします:

Roktは、ユーザーがファネルを通過したことを確認できます（高い意図のシグナル）。
Roktは、そのユーザーをリターゲティングオーディエンスに配置し、再エンゲージし、再訪問した場合に同じユーザーとして認識します。

1.3 ユーザー属性の設定1.3 ユーザー属性の設定への直接リンク

各ピクセルリクエストにユーザー属性を含めることができます。カンマ区切りのua_k（ユーザー属性キー）とua_v（ユーザー属性値）パラメータを使用します。

Roktが収集を推奨する属性のリストについては、推奨ユーザー属性を参照してください。

ua_k=firstname,lastname,zip&ua_v=Jane,Smith,98103

1.4 スクリーン名の設定1.4 スクリーン名の設定への直接リンク

各ページビューでスクリーン名をscreen_nameイベント属性として渡し、Roktがファネル内のスクリーンを区別できるようにします。

attrs_k=screen_name&attrs_v=checkout

注記

これは特にシングルページアプリケーション（SPA）において重要です。ユーザーがSPA内でスクリーン間を移動する際、URLやドキュメントタイトルはしばしば変更されないため、hnやttlだけではRoktがユーザーがどのスクリーンにいるかを判断できません。明示的なscreen_nameがないと、すべてのスクリーンビューが同一に見え、ファネルイベントがセッション全体で繰り返される同じイベントに統合されてしまいます。各ルート変更時にscreen_nameを明示的に設定してください。

ページビューの例ページビューの例への直接リンク

JavaScript
HTML

// ─── Page View Pixel ───────────────────────────────────────────────────────

const API_KEY = "YOUR_API_KEY";
const pixelURL = `https://pixels.mparticle.com/v1/${API_KEY}/Pixel`;
const currentTime = new Date().getTime();

// Generate or retrieve a persistent anonymous ID to tie all page view events
// together across visits.
function getSessionId() {
  let sessionId = localStorage.getItem("rokt_session_id");
  if (!sessionId) {
    sessionId = crypto.randomUUID();
    localStorage.setItem("rokt_session_id", sessionId);
  }
  return sessionId;
}

// If rtid is present in the URL (landing page), persist it for use throughout
// the funnel. On subsequent pages, retrieve the stored value instead.
function getRtid() {
  const fromUrl = new URLSearchParams(window.location.search).get("rtid");
  if (fromUrl) {
    const normalized = fromUrl.toLowerCase();
    localStorage.setItem("rokt_rtid", normalized);
    return normalized;
  }
  const stored = localStorage.getItem("rokt_rtid");
  return stored ? stored.toLowerCase() : "";
}

// Fetch user email from your persistence layer (e.g., localStorage,
// sessionStorage, cookies, or server-side session).
const email = null; // e.g., localStorage.getItem("userEmail") or null
// If you're using a hashed email address, set it in 'hashedEmail' instead
// (lowercase and trim before hashing).
const hashedEmail = null; // e.g., localStorage.getItem("hashedEmail") or null

const sessionId = getSessionId();
const rtid = getRtid();

// Set this to a value identifying the current screen — for example,
// "home", "product_details", or "checkout". On SPAs, update it whenever
// the screen changes, since the URL may not.
const screenName = "YOUR_SCREEN_NAME";

const params = new URLSearchParams({
  dt: "ScreenView",
  ct: currentTime,
  hn: window.location.hostname,
  ttl: document.title,

  // Event attributes — screen_name identifies the current screen
  attrs_k: "screen_name",
  attrs_v: screenName,
});

if (email) {
  // Known user: pass session ID, email, and Rokt Click ID (rtid)
  params.append("ui_t", "other3,email,other2");
  params.append("ui_v", `${sessionId},${email},${rtid}`);
} else if (hashedEmail) {
  // Known user with hashed email
  params.append("ui_t", "other3,other,other2");
  params.append("ui_v", `${sessionId},${hashedEmail},${rtid}`);
} else {
  // Anonymous user: pass session ID and Rokt Click ID only
  params.append("ui_t", "other3,other2");
  params.append("ui_v", `${sessionId},${rtid}`);
}

fetch(pixelURL + "?" + params.toString());

クライアントサイドのJavaScriptが利用できない場合に備えて、1×1の画像ピクセルを含めることもできます。パラメータ値は、ページがブラウザに提供される前にサーバーサイドでレンダリングされる必要があります。

<!-- Known user (email available) -->
<img
  src="https://pixels.mparticle.com/v1/{api_key}/Pixel?dt=ScreenView&ct={timestampMs}&hn={hostname}&ttl={pageTitle}&attrs_k=screen_name&attrs_v={screenName}&ui_t=other3,email&ui_v={sessionId},{emailAddress}"
  width="1"
  height="1"
/>

<!-- Anonymous user (no PII available) -->
<img
  src="https://pixels.mparticle.com/v1/{api_key}/Pixel?dt=ScreenView&ct={timestampMs}&hn={hostname}&ttl={pageTitle}&attrs_k=screen_name&attrs_v={screenName}&ui_t=other3&ui_v={sessionId}"
  width="1"
  height="1"
/>

2. コンバージョンの追跡2. コンバージョンの追跡への直接リンク

コンバージョンを追跡するには、顧客がコンバージョンした後に読み込まれるページ（購入確認ページや「ありがとう」ページなど）でピクセルリクエストを送信します。

コンバージョンピクセルを送信する際は、以下を確認してください:

ユーザーの身元（ui_t, ui_v）をメールまたはハッシュ化されたメールアドレスと共に含めます。ユーザーを匿名で追跡していた場合は、持続的な匿名識別子とメールの両方を一緒に渡し、Roktが匿名ファネル活動をコンバートされたユーザーにリンクできるようにします:
```
ui_t=other3,email&ui_v={sessionId},j.smith%40example.com
```
ユーザー属性（ua_k, ua_v）を少なくとも以下と共に含めます:
- firstname
- lastname
- zip
- mobile
以下の必須コンバージョンイベント属性（attrs_k, attrs_v）を含めます:
- conversiontype — コンバージョンイベントの名前。例: signupまたはpurchase。
- confirmationref — Roktの重複排除キーとして使用される取引または注文ID。

注記

conversiontype と confirmationref 属性は、Roktがキャンペーンを効果的に最適化し、イベントとコンバージョンを適切に重複排除するために必要です。これらは必須の起動属性です。

コンバージョンイベントをログに記録する際には、できるだけ多くのユーザー属性とイベント属性を含めることで、Roktのキャンペーン最適化能力を向上させます。

JavaScript
HTML

// ─── Conversion Pixel ──────────────────────────────────────────────────────

const API_KEY = "YOUR_API_KEY";
const pixelURL = `https://pixels.mparticle.com/v1/${API_KEY}/Pixel`;
const currentTime = new Date().getTime();

function getSessionId() {
  let sessionId = localStorage.getItem("rokt_session_id");
  if (!sessionId) {
    sessionId = crypto.randomUUID();
    localStorage.setItem("rokt_session_id", sessionId);
  }
  return sessionId;
}

// Retrieve rtid from localStorage — it was captured and stored on the landing page.
function getRtid() {
  const fromUrl = new URLSearchParams(window.location.search).get("rtid");
  if (fromUrl) {
    const normalized = fromUrl.toLowerCase();
    localStorage.setItem("rokt_rtid", normalized);
    return normalized;
  }
  const stored = localStorage.getItem("rokt_rtid");
  return stored ? stored.toLowerCase() : "";
}

const sessionId = getSessionId();
const rtid = getRtid();

const params = new URLSearchParams({
  dt: "AppEvent",
  et: "Transaction",
  n: "conversion",
  ct: currentTime,

  // User identity — include the persistent session ID, email, and Rokt Click ID
  ui_t: "other3,email,other2",
  ui_v: `${sessionId},j.smith@example.com,${rtid}`,

  // User attributes
  ua_k: "firstname,lastname,zip,mobile",
  ua_v: "John,Doe,98103,3125551515",

  // Conversion event attributes — conversiontype and confirmationref are required
  attrs_k: "conversiontype,confirmationref,amount,currency",
  attrs_v: "signup,54321,300.5,USD",
});

fetch(pixelURL + "?" + params.toString());

コンバージョンピクセルを1×1の画像として発火させることもできます。パラメーター値は、ページがブラウザに提供される前にサーバー側でレンダリングされる必要があります。

<img
  src="https://pixels.mparticle.com/v1/{api_key}/Pixel?dt=AppEvent&et=Transaction&n=conversion&ct={timestampMs}&ui_t=other3,email&ui_v={sessionId},{emailAddress}&ua_k=firstname,lastname,zip,mobile&ua_v={firstName},{lastName},{zip},{mobile}&attrs_k=conversiontype,confirmationref,amount,currency&attrs_v={conversionType},{confirmationRef},{amount},{currency}"
  width="1"
  height="1"
/>

推奨ユーザー属性推奨ユーザー属性への直接リンク

Roktは、以下のユーザー属性をできるだけ多く設定することを推奨します:

ユーザー属性キー	例示値	備考
firstname	John	顧客の名。
firstnamesha256	fab1e2e699b3b927cbf875046a64f222	名のSHA-256ハッシュ。ハッシュ化の前に、小文字にし、末尾のスペースをすべてトリムします。
lastname	Doe	顧客の姓。
lastnamesha256	fab1e2e699b3b927cbf875046a64f222	姓のSHA-256ハッシュ。ハッシュ化の前に、小文字にし、末尾のスペースをすべてトリムします。
mobile	3125551515	電話番号は `1112345678` または `+1 (222) 345-6789` の形式でフォーマットできます。
mobilesha256	fab1e2e699b3b927cbf875046a64f222	携帯番号のSHA-256。ハッシュ化の前に、`5551234567`（ダッシュやスペースなし）の形式にフォーマットします。
age	33	顧客の年齢。
dob	19900717	生年月日。`yyyymmdd` の形式でフォーマットされます。
gender	M	顧客の性別。例えば、`M`、`Male`、`F`、または `Female`。
city	Brooklyn	顧客の市。
state	NY	顧客の州。
zip	11201	顧客の郵便番号。
title	Mr	顧客の敬称。例えば、`Mr`、`Mrs`、`Ms`。
language	en	購入に関連する言語。
value	52.25	顧客の価値。
predictedltv	136.23	顧客の予測生涯価値の合計。

すべてのユーザー属性は異なる名前でなければなりません。

3. 統合のテスト3. 統合のテストへの直接リンク

Roktは、ピクセルリクエストが正しく送信され、イベントが正常にログされることを確認するために、統合のテストを推奨します。

注記

以下の手順を確認した後、エンドユーザーとしていくつかのテスト購入またはサインアップを行ってください。その後、使用したメールまたはハッシュ化されたメールをRoktのアカウントマネージャーに提供し、データがRoktに正しく取り込まれていることを確認してください。

ページビュー追跡のテストページビュー追跡のテストへの直接リンク

新しいブラウザウィンドウを開きます。
ブラウザの開発者ツールパネルにアクセスします。ほとんどのブラウザでは、画面を右クリックしてInspectを選択することでこれを行います。
開発者ツールパネルで、Networkタブに移動し、フィルターバーにpixels.mparticle.comを入力します。
ページビューのピクセルを配置したページを読み込みます。pixels.mparticle.comへのGETリクエストが表示されるはずです。

コンバージョン追跡のテストコンバージョン追跡のテストへの直接リンク

新しいブラウザウィンドウを開きます。
ブラウザの開発者ツールパネルにアクセスします。ほとんどのブラウザでは、画面を右クリックしてInspectを選択することでこれを行います。
開発者ツールパネルで、Networkタブに移動し、フィルターバーにpixels.mparticle.comを入力します。
サイトでテストコンバージョンを完了します。確認ページで、コンバージョンイベント属性を含むpixels.mparticle.comへのGETリクエストが表示されるはずです。

トラブルシューティングトラブルシューティングへの直接リンク

テスト中に確認すること:

dtパラメータが正しく設定されていること（ページビューの場合はScreenView、コンバージョンイベントの場合はAppEvent）。
ctパラメータが有効なエポックタイムスタンプ（ミリ秒単位）を含んでいること。
すべてのクエリパラメータの値がURLエンコードされていること、特にメールアドレス（例: %40は@）。

1. ページビューのトラッキング1. ページビューのトラッキング への直接リンク

1.1 Rokt APIキーを入力1.1 Rokt APIキーを入力 への直接リンク

1.2 ユーザーの識別1.2 ユーザーの識別 への直接リンク

1.3 ユーザー属性の設定1.3 ユーザー属性の設定 への直接リンク

1.4 スクリーン名の設定1.4 スクリーン名の設定 への直接リンク

ページビューの例ページビューの例 への直接リンク

2. コンバージョンの追跡2. コンバージョンの追跡 への直接リンク

推奨ユーザー属性推奨ユーザー属性 への直接リンク

3. 統合のテスト3. 統合のテスト への直接リンク

ページビュー追跡のテストページビュー追跡のテスト への直接リンク

コンバージョン追跡のテストコンバージョン追跡のテスト への直接リンク

トラブルシューティングトラブルシューティング への直接リンク