MakeShop - タグ実装ガイド

目次

Makeshopの基本設定のテンプレートをお使いのページには、このガイドでご紹介するタグをコピー&ペーストしていただくことで簡単にCriteoのタグが実装ができます。

1・PC用 トップページタグを実装する

Makeshop管理画面 -> 独自デザイン makeshop_step1

トップページ編集 -> 共通headタグ管理 makeshop_templatelist

ページ設定でトップを選択->以下のタグを貼り付ける

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
        { event: "setAccount", account: {{accountid}} },
        { event: "setSiteType", type: "d" },
        { event: "viewHome" }
);
</script>

makeshop_top1

適用をクリック

makeshop_top2

2・PC用 一覧ページタグを実装する

ページ設定で商品カテゴリーを選択 ->以下のタグを貼り付ける ー>適用をクリック

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">

window.onload = function() {
  var crto_Atag = document.getElementsByTagName("a");
  var crto_list = [];
  var y =0;
    for(var i =0; i<crto_Atag.length; i++){
         if(crto_Atag[i].href.indexOf("/shopdetail/")>-1){
        var vID = crto_Atag[i].href.split("/")[4];
            if(crto_list.indexOf(vID) < 0 && y<3){
               crto_list.push(vID);
              y++;
            }  
        }
    }
     if(crto_list.length > 0){
       window.criteo_q = window.criteo_q || [];
       window.criteo_q.push(
          { event: "setAccount", account: {{accountid}} },
          { event: "setEmail", email: "" },
          { event: "setSiteType", type: "d" },
          { event: "viewList", item: crto_list}
       );
     }
}
</script>

makeshop_list1

3・PC用 詳細ページタグを実装する

ページ設定で商品詳細を選択 ->以下のタグを貼り付ける ー>保存をクリック

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">

  window.onload = function() {
    var crto_pid = document.location.href.split("shopdetail/")[1].split("/")[0].replace(/\D+/g,'');
      window.criteo_q = window.criteo_q || [];
      window.criteo_q.push(  
        { event: "setAccount", account: {{accountid}} },
        { event: "setSiteType", type: "d" },
        { event: "viewItem", item: crto_pid }
      );            
   }

</script>

makeshop_product1

4・PC用 カートページタグを実装する

ページ設定で買い物かごを選択 ->以下のタグを貼り付ける ー>保存をクリック

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
    window.onload = function(){
       var crto_items = 0;
       crto_items = document.getElementsByName("orgamount").length;
         if(crto_items > 0){
          var crto_data =[];
            for(var i =0; i<crto_items; i++){
            var crto_id = document.getElementsByName("brandcode")[i].value;
            var crto_quantity = document.getElementsByName("orgamount")[i].value;
            var crto_total_price = document.getElementsByClassName('{{jpmsprice}}')[i].innerHTML.split("円")[0].replace(/\D+/g,'').replace(/,/g,'');
            var crto_price = crto_total_price/crto_quantity;
              crto_data.push({id:crto_id,price:crto_price,quantity:crto_quantity});           
           }

          window.criteo_q = window.criteo_q || [];
          window.criteo_q.push(
            { event: "setAccount",  account: {{accountid}} },
            { event: "setSiteType", type: "d"},
            { event: "viewBasket",item: crto_data}
          );
         }
    }
</script>

5・PC用 スマホ CVページタグを実装する

プロモーション ->タグの設定 ->任意アフィリエイト設定 ->PC用コンバージョンタグ設定

  • 出力設定 ⇒ 出力するをチェック

  • アフィリエイト名 ⇒ CRITEOと入力

  • 出力画面 ⇒ 注文完了画面を選択

  • 出力箇所 ⇒ </body>の前を選択

makeshop_cv1

”開始部”に下のコードを貼り付ける

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">

window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
        { event: "setAccount", account: {{accountid}} },
        { event: "setSiteType", type: /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d" },
        { event: "trackTransaction" , id: '[ORDER_NUM]',
            item: [

”繰り返し部”に下のコードを貼り付ける

{ id: '[ITEM_CD_SYS]', price: [ITEM_PRICE], quantity: [ITEM_COUNT] }

”区切り文字”にカンマを入れる

,

”終了部”に下のコードを貼り付ける

]});
</script>

6・スマホ用トップページタグを実装する

Makeshop管理画面 -> 独自デザイン -> スマホ -> 編集

makeshop_m_step1

トップページ編集 -> 共通headタグ管理

makeshop_m_step2

ページ設定でトップを選択->以下のタグを貼り付ける ー>適用をクリック

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
        { event: "setAccount", account: {{accountid}} },
        { event: "setSiteType", type: "m" },
        { event: "viewHome" }
);
</script>

makeshop_m_top1

7・スマホ用一覧ページタグを実装する

ページ設定で商品カテゴリーを選択->以下のタグを貼り付ける ー>適用をクリック

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.onload=function(){
 var crto_loop=document.getElementById("list_item").children,crto_list=[],x=0;
  if(typeof crto_loop != "undefined"){
    for(var i=0;i<crto_loop.length;i++){
     if(x < 3){
       var crto_prod=crto_loop[i].children[0].href.split("/")[4].split("\x26")[0].split("\x3d")[1];
       crto_list.push(crto_prod);
       x++;
      }
     }  

    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
        { event: "setAccount", account:  {{accountid}}},
        { event: "setEmail", email: "" },
        { event: "setSiteType", type: "m" },
        { event: "viewList", item: crto_list}
    );
  }
}
</script>

8・スマホ用詳細ページタグを実装する

ページ設定で商品詳細を選択->以下のタグを貼り付ける ー>適用をクリック

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
    window.onload=function(){
     var crto_pid=document.location.href.split("/")[4].split("\x3d")[1].split("\x26")[0];
      window.criteo_q = window.criteo_q || [];
      window.criteo_q.push(  
       { event: "setAccount", account: {{accountid}}},
       { event: "setSiteType", type: "m" },
       { event: "viewItem", item: crto_pid }
      );
    }
</script>

9・スマホ用カートページタグを実装する

ページ設定で買い物かごを選択->以下のタグを貼り付ける ー>保存をクリック


<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
  window.onload = function(){
    var crto_items = 0;
    crto_items = $(".itemName").length;
      if(crto_items > 0){
         var crto_data =[];
           for(var i =0; i<crto_items; i++){
             crto_data.push({id:$(".itemName").eq(i).find("a").eq(0).attr("href").split("\x3d")[1].split("\x26")[0], 
             price:$(".unitPrice").eq(i).html().replace(/\D+/g,'').replace(/,/g,''),
             quantity:$(".amount").eq(i).find("input").val()});
           }
         window.criteo_q = window.criteo_q || [];
         window.criteo_q.push(
           { event: "setAccount",  account: {{accountid}} },
           { event: "setSiteType", type: "m"},
           { event: "viewBasket",item: crto_data}
         );
      }
  }
</script>

タグ動作テスト

[[accurate_jp]]