受注IDの取得イメージ
本記事では、サンプルのECサイトを用いて、購入完了画面に表示されている「受注ID」をHTMLから取得し、アクセスログタグに追加する手順を説明します。
【参考】サンプルサイトの購入完了画面に表示されている「受注ID(=注文ID)」
受注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」はランダムに発行される完了コード |
———-
● ②「購入完了画面の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コードには、「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のみを取り出せるようにコーディングしています。 |
「値を取得するタイミング」を指定します
今回は、「ページを開いたタイミングで取得」を指定します。