リレーション設定例(受注IDを取得する場合)

受注IDの取得イメージ

本記事では、サンプルのECサイトを用いて、購入完了画面に表示されている「受注ID」をHTMLから取得し、アクセスログタグに追加する手順を説明します。

【参考】サンプルサイトの購入完了画面に表示されている「受注ID(=注文ID)」

購入完了画面に表示されている受注ID「1024」を抜き出す方法を説明していきます!

受注IDの取得手順

共通設定」をクリックします

タグ管理」をクリックします

リレーション設定」をクリックします

新規作成」をクリックします

受注ID」を選択し、「適用」をクリックします

ソースコード」をクリックします

「Step1 ページの指定」欄に「(次で終わる)(thank_you)」を入力し、「追加」をクリックします

「ページの指定」に入力する内容について

以下の2点に注意し、受注IDが表示される「購入完了画面」を指定します。

● ①「購入完了画面」のみが該当する条件を指定する ●
本記事で使用しているサンプルサイトにおける各ページのURLは以下のようになっているとします。

ページタイトル URL
トップページ
https://fs-kf.myshopify.com/
商品一覧
https://fs-kf.myshopify.com/collections/all
商品詳細
https://fs-kf.myshopify.com/products/tshirts
※「tshirts」は商品ID
カート
https://fs-kf.myshopify.com/cart
購入確認画面
https://fs-kf.myshopify.com/48512/checkouts/26f48e4bedce
※「48512」は顧客ID
※「26f48e4bedce」はランダムに発行される確認コード
購入完了画面
https://fs-kf.myshopify.com/48512/checkouts/5d0ce5fd31/thank_you
※「48512」は顧客ID
※「5d0ce5fd31」はランダムに発行される完了コード
この場合は、「/5d0ce5fd31」と「thank_you」という2つの文字列を、購入完了画面を特定する条件指定に利用することができます。
———-
● ②「購入完了画面のURL」における不変部分のURLのみを使って条件を指定する ●
購入完了画面のURLは以下の構造になっているとします。

 https://fs-kf.myshopify.com                        → 不変
 /48512                                           → 可変(顧客ごとに変わる)
 /checkouts                                                     → 不変 
 /5d0ce5fd31                                                 → 可変(購入ごとに変わる)
 thank_you                                                    → 不変

この場合は、不変な文字列である「https://fs-kf.myshopify.com」「/checkouts」「thank_you」の3つを、購入完了画面を特定する条件指定に利用することができます。
———-
● サンプルサイトにおける「購入完了画面」を指定する条件 ●
上記①と②を両方とも満たす文字列は「thank_you」のみであるため、サンプルサイトにおいて購入完了画面を指定する条件は以下になります。

(次で終わる)thank_you

「Step2 場所の指定」欄にあるその他」をクリックします

JavaScriptのコードを入力します

※今回のサンプルサイトにおいて受注IDを取得するケースにおけるコードは以下内容になります

var orderId = document.getElementsByClassName('os-order-number')[n].innerText.replace("注文 #",""); 
[n]は、ページの作りによって適切な要素番号を設定する必要があります
「その他」欄に記述するJavaScriptコードの内容

● JavaScriptコードに記述する内容 ●
「その他」欄のJavaScriptコードには、「customValue」という変数に対して、リレーションキー(受注IDや顧客ID、商品IDなど)項目となる値を代入する処理を記述します

● リレーションキー項目取得までの流れ ●
「Step1 ページの指定」で指定したページにユーザーがアクセスした際に、「その他」欄に記述したJavaScriptが実行される仕組みになっているため、ユーザーがページにアクセスしたタイミングで、リレーションキー項目を取得し、そのキー項目をb→dashのワンタグで取得しているアクセスログの1カラムに追加/保管するという流れになっています。

● 具体的なJavaScriptコード内容の説明 ●
今回ご紹介しているサンプルサイトにおいて、受注IDを取得するJavaScriptコードは以下の構造になっていますので、貴社サイトでキー項目を取得する際の参考になさってください。

コード 詳細
orderId 受注IDを代入する変数として利用しています。
※「orderId」変数を利用せず、直接「customValue」変数に値を代入しても問題ありません。
※コードが複雑になった場合は「orderId」変数を利用した方が見やすい記述になるため、今回のサンプルサイトではイメージの位置づけで「orderId」変数を利用しています
document.
getElementsByClassName()
購入完了画面を構成するHTMLの中から、特定の「CLASS属性」の値を取得するコードです。
サンプルサイトでは「CLASS属性」の値を取得していますが、他「ID属性」や「NAME属性」「href属性」なども取得可能で、その場合はコードの記述方法が変わります。

※「ID属性」を取得する場合:document.getElementById()
※「NAME属性」を取得する場合:document.getElementsByName()
os-order-number 今回のサンプルサイトにおいて「受注ID」が指定されている「CLASS属性」の値です。
属性値の確認方法は、下記の『「受注ID」の属性値の確認方法(Chromeの場合)』を参照ください。
.innerText 今回のサンプルサイトにおいて「受注ID」の値が保存されている「innerText」プロパティを指定しています。
.replace("注文 #","") 今回のサンプルサイトにおいて「受注ID」の値は「注文 #1024」となっていますので、「注文 #」を消去し受注IDのみを取り出せるようにコーディングしています。
「受注ID」の属性値の確認方法(Chromeの場合)
商品購入画面ページを開きます

受注IDが表示されている箇所を右クリックし、表示されるメニューから「検証」を選択します

受注IDのHTMLを確認し、属性値を確認します

Ctrl」+「F」をキーボードで打ち、検索欄を表示させます

os-order-number」を入力し、検索結果が「1of1」になっていることを確認します

受注IDのCLASS属性「os-order-number」は、購入画面内で他に使われていないことが分かりましたので、「os-order-number」を指定することで、受注IDを取得することができます!
値を取得するタイミング」を指定します

今回は、「ページを開いたタイミングで取得」を指定します。

「ページ内でクリックが発生したタイミングで取得」の『ON』をクリックし、『OFF』にします

OFF』に変わっていることを確認します

適用」をクリックします

リレーション設定名」「取得した値の項目名」「個人情報設定」を設定し、「保存」をクリックします

リレーション設定一覧に、リレーション設定ファイルが新規追加されたことを確認し「閉じる」をクリックします

アクセスログタグ」をクリックします

未設定」をクリックします

先ほど追加した「リレーション設定ファイル」を選択し、「適用」をクリックします

ON」をクリックし、「OFF」にします

アクセスログタグを一度「OFF」にする必要があります
アクセスログタグ画面にリレーション設定をした後、アクセスログタグを一度「OFF」にして、再び「ON」にする必要がありますのでご注意ください。
OFF」をクリックし、「ON」にします

アクセスログタグが「ON」であることを確認します