GoogleChromeを利用した金額パラメータの取得方法 – ecコンシェルサポートサイト

Google Chromeの検証機能を利用して、カートページ、コンバージョンページの金額を取得する方法です。

ただし、HTMLページ上に金額が表示されていない場合、HTMLの構造が動的に変化するサイトでは、金額を取得することが出来ませんのでご了承ください。

【確認手順】

Google Chromeを使用して、カートページ、コンバージョンページ（HTML）を表示します。
ページが表示されているウィンドウの任意の場所を右クリックして現れるコンテキストメニューから「検証(I)」を選択して、デベロッパー・ツールを表示します。
Elementsタブを選択してElementsパネルを表示します。
Elementsタブの左横のボタンをクリックして、Elementを選択可能な状態にします。
取得したい金額部分にマウスを当てます。
コンソールに指定したパラメータのHTML要素が青抜きで表示されます。
コンソール部分青抜きの箇所にマウスを当て、右クリックし「Copy」→取得したい要素（下記例の場合では）「Copy Xpath」をクリックします。
OSのバッファにコピーした要素が保存されていますので、メモ帳等にコピーして利用してください。
・Xpathの例：//*[@id="cart-detail"]/tbody[2]/tr/td[1]
・Selectorの例：#cart-detail > tbody:nth-child(3) > tr > td:nth-child(2)

以下のスクリプトの赤字部分をコピーした要素で置換します。（下記はXpathの例）

--貼り付けるScript
<script>
//ecコンシェルカート金額取得
function getPrice() {
  expression = '//*[@id="cart-detail"]/tbody[2]/tr/td[1]';
  ret = document.evaluate(expression,document,null,XPathResult.ANY_TYPE,null);
  while(e=ret.iterateNext()) {
    return e.innerText;
  }
  return 0;
}
</script>

9で作成したスクリプトをカートタグ（コンバージョンタグ）の直前に記載し、金額取得パラメータをgetPrice()と変更します。

--カートタグのカスタマイズ例
<script>
//ecコンシェルカート金額取得
function getPrice() {
  expression = '//*[@id="cart-detail"]/tbody[2]/tr/td[1]';
  ret = document.evaluate(expression,document,null,XPathResult.ANY_TYPE,null);
  while(e=ret.iterateNext()) {
    return e.innerText;
  }
  return 0;
}</script>
<script>
(function(w,d,url,a,s,e){
w[a]= (w[a]=w[a]||[]);
s = d.getElementsByTagName("script")[0];e = d.createElement("script");e.src=url;e.async=1;e.src=url;s.parentNode.insertBefore(e,s);
})(window,document,'//ec-concier.com/サイト識別子/analytics.js','ara');
ara.push(['init', 'サイト識別子']);ara.push(['cart', {cartPrice:getPrice()}]); </script>

カスタマイズしたタグを、カートタグ設置ページ、コンバージョンタグ設置ページに設置します。

{[{category.name}]}