カラーミーショップ - タグ実装ガイド¶

概要

概要¶

カラーミーショップをお使いのサイトには以下の手順に沿ってCriteoのタグを実装ください。.

トラッキングタグを実装する¶

A. カラーミーショップ管理画面 → ショップ作成 → デザイン → 今使用中の「テンプレート編集」を選択

B. デザイン編集 → 共通 → 「HTML・CSS編集」をクリック

C. 以下のコードを「HTML編集」の最下段に挿入して「保存」をクリック

<!--Criteo BEGIN-->
<script
    type="text/javascript"
    src="//dynamic.criteo.com/js/ld/ld.js?a={{accountid}}"
    async="true"
></script>
<script type="text/javascript">
var criteoTemplate = '<{$tpl_name}>';
if(criteoTemplate =="top" || criteoTemplate =="product_list" || criteoTemplate =="product_srh" || criteoTemplate =="product" ){
    var criteoSitetype = /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d";  
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
            { event: "setAccount", account: {{accountid}} },
            { event: "setSiteType", type: criteoSitetype });
            if(criteoTemplate =="top"){
                 window.criteo_q.push({ event: "viewHome", ecpplugin: "colormeshop_gd" });
            }else if(criteoTemplate =="product_srh" || criteoTemplate =="product_list"){
                var ctoList = [];
                ctoList.push('<{$productlist[0].id}>','<{$productlist[1].id}>','<{$productlist[2].id}>');
                 window.criteo_q.push({ event: "viewList", item: ctoList, ecpplugin: "colormeshop_gd"});
            }else if(criteoTemplate =="product"){
                        var criteoPid = '<{$product.id}>';
                        window.criteo_q.push({ event: "viewItem", item: criteoPid, ecpplugin: "colormeshop_gd"});
                         var criteoButton  = $("input").filter(function(){
                           if(this.title.match("カートに入れる")){
                           return this.title.match("カートに入れる")
                           }else if(this.value.match("カートに入れる")){
                           return this.value.match("カートに入れる")
                           }else if(this.alt.match("カートに入れる")){
                           return this.alt.match("カートに入れる")
                           }else if(this.alt.match("ADD TO CART")){
                           return this.alt.match("ADD TO CART")
                           }
                        });
                        var criteoPrice ='<{$product.regular_price}>';
                        var criteoPriceTrim = criteoPrice.split("円")[0].replace(/\D+/g,'');
                        var criteoQuantity = $("input[name='product_num']").val();
                        var criteoArray =[{id:criteoPid, price:criteoPriceTrim, quantity:criteoQuantity}];  
                        criteoButton.click(function(){
                          window.criteo_q = window.criteo_q || [];
                          window.criteo_q.push(
                           { event: "setAccount", account: {{accountid}} },
                           { event: "setSiteType", type: criteoSitetype },
                           { event: "viewBasket", ecpplugin: "colormeshop_gd", item: criteoArray }
                          );
                        });

        }
    }   
</script>
<!--Criteo END-->

D. スマートフォンサイトをデスクトップサイトと別途で管理した場合(旧カラーミーショップ)、デスクトップサイトと同様に、HTML編集画面の一番下に上のスクリプトを追加してください。

E. カートタグはお使いのテンプレートによってはコードを一部微調整する必要があります。カートタグが計測できない時は担当者までご連絡ください。

コンバージョンぺージタグを実装する¶

A. カラーミーショップ管理画面 → ツール → コンバージョンタグ

B. 以下のコンバージョンタグを「bodyタグ内設置」に追加

<!--Criteo BEGIN-->
<script
    type="text/javascript"
    src="//dynamic.criteo.com/js/ld/ld.js?a={{accountid}}"
    async="true"
></script>
<!--Criteo コンバージョンページタグ-->
<script type="text/javascript">
    // collect criteo variables
    var criteoTransaction = <{$order_no}>,
    criteoPrice = <{$order_price}>,
    criteoQuantity = <{$order_count}>,
    criteoProduct = '<{$order_products_id}>',
    splitProd = criteoProduct.split(","),
    criteoArray=[];
    // define device type
    criteoSitetype = /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d";
    // calculate price
    var eachPrice = Math.round(criteoPrice/splitProd.length);
    // create arrays
    for(var i =0; i<splitProd.length; i++){
        criteoArray.push({id:splitProd[i], price:eachPrice, quantity:1});
    }
    // trigger criteo cv tag
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push({ event: "setAccount", account: {{accountid}} }, 
    { event: "setSiteType", type: criteoSitetype }, 
    { event: "trackTransaction", ecpplugin: "colormeshop_gd", id: criteoTransaction, item: criteoArray });
</script>
<!--Criteo END-->

タグ動作確認¶

[[accurate_jp]]