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

概要

概要

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

  1. トップページタグ

    商品一覧ぺージタグ

    商品詳細タグ

    カートタグ

    を実装する

  2. コンバージョンタグを実装する

[[disclaimer-nonplugin]]

トップページタグ、商品一覧ぺージタグ、商品詳細タグ、カートタグを実装する

カラーミーショップ管理画面 -> ショップ作成 -> デザイン colormeshop_designbutton

デザイン編集 ->共通 のHTML編集をクリック colormeshop_templatelist

カートタグはお使いのテンプレートによってはコードを一部微調整する必要がある場合があります。


<!--Criteo タグ-->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" 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" });

            }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});

            }else if(criteoTemplate =="product"){
                        var criteoPid = '<{$product.id}>';
                        window.criteo_q.push({ event: "viewItem", item: criteoPid});

                         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", item: criteoArray }
                          );
                        });

        }
    }   
</script>

スマートフォンサイトにも実装するには、スマートフォンショップ ー>デザイン設定 ー> 共通のHTML編集をクリック デスクトップサイトと同様に、HTML編集画面の一番下に上のスクリプトを追加してください。

colormeshop_templatelist

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

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

colormeshop_templatelist

コンバージョンタグ追加画面 colormeshop_templatelist

<!--Criteo コンバージョンページタグ-->
<!--Criteo コンバージョンページタグ-->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">

$(document).ready(function() {
    // 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 = 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", id: criteoTransaction, item: criteoArray });
});
</script>

タグ動作確認

[[accurate_jp]]