thumbnail

ecforce

LEEEP2024-10-29

このマニュアルでは共通タグと計測タグの作成についてご案内させていただきます。

※ 作成したタグを別途LPまたはサンクスページに設定いただく必要がございます。

※ 2023年4月時点でのecforce管理画面における操作案内となります。

共通タグの設置は以下の手順でお願いいたします。

LPに設置する場合は、マーケティング管理 > 広告管理 > LPタグ管理から共通タグを作成してください。

タグ名: 「LEEEP共通タグ」と入力

タグ表示箇所: 「header 要素の最後に追加」を選択

タグコード: 以下のコードを入力

重要:「site_id」はこちらより自身のIDを確認の上、「xxxxxxxxxxxxxxxx」を変更してください。

Plaintext
<script src="https://tracking.leeep.jp/v1/tracking/js"></script>
<script src="https://cite.leeep.jp/v2/embed/js" defer></script>
<script defer>
    ParteTracking.viewPage({site_id: 'xxxxxxxxxxxxxxxx'});
    document.addEventListener('DOMContentLoaded', _ => {
        const productIdEl = document.getElementById('leeep-product-id');
        const leeepProductId = productIdEl ? productIdEl.dataset.value ?? '' : '';
        const uidEl = document.getElementById('customer-number');
        const leeepUid = uidEl ? uidEl.value ?? '' : '';
        LeeepCite.init({
            site_id: 'xxxxxxxxxxxxxxxxxxxx',
            product_id: leeepProductId,
            uid: leeepUid,
        });
    });
</script>

ショップ管理 > テーマ管理 > 利用しているテーマのアクション > コード編集に進みます。

以下のファイルを編集してください:

  • layout > 購入

  • layout > 購入以外

各ファイルの<head>要素内に以下のコードを埋め込んでください:

重要:「site_id」はこちらより自身のIDを確認の上、「xxxxxxxxxxxxxxxx」を変更してください。

Plaintext
<script src="https://tracking.leeep.jp/v1/tracking/js"></script>
<script src="https://cite.leeep.jp/v2/embed/js" defer></script>
<script defer>
    ParteTracking.viewPage({site_id: 'xxxxxxxxxxxxxxxx'});
    document.addEventListener('DOMContentLoaded', _ => {
        const productIdEl = document.getElementById('leeep-product-id');
        const leeepProductId = productIdEl ? productIdEl.dataset.value ?? '' : '';
        const uidEl = document.getElementById('customer-number');
        const leeepUid = uidEl ? uidEl.value ?? '' : '';
        LeeepCite.init({
            site_id: 'xxxxxxxxxxxxxxxxxxxx',
            product_id: leeepProductId,
            uid: leeepUid,
        });
    });
</script>


ショップ管理 > 各種設定 > ショップのタグ管理から計測タグを作成してください。

※ LPに設置する場合は、マーケティング管理 > 広告管理 > LPタグ管理から計測タグを作成してください。

※ 作成した計測タグはショップ購入(完了)ページに設置してください。

 

以下は設定の例となります。

 

タグ名:「LEEEP計測タグ」と入力

タグ表示箇所:「body 要素の最後に追加」を選択

タグコード:以下のコードを入力

重要:「site_id」はこちらより自身のIDを確認の上、「xxxxxxxxxxxxxxxx」を変更してください。

Plaintext
<script src="https://tracking.leeep.jp/v1/tracking/js"></script>
<script>
    const ids = '{{ order.order_items | map: 'product' | map: 'number' | join: ', ' }}'.split(', ');
    const skus = '{{ order.order_items | map: 'variant' | map: 'sku' | join: ', ' }}'.split(', ');
    const prices = [{{ order.order_items | map: 'price' | join: ', ' }}];
    const quantities = [{{ order.order_items | map: 'quantity' | join: ', ' }}];
    const names = '{{ order.order_items | map: 'variant' | map: 'name' | join: ', ' }}'.split(', ');
    
    const products = ids.map((id, i) => {
        return {
            product_id: id,
            sku_code: skus[i],
            sales_price: Number(prices[i]),
            quantity: Number(quantities[i]),
            name: names[i]
        };
    });
    
    ParteTracking.order({
        site_id: 'xxxxxxxxxxxxxxxxxxxxx',
        order_id: '{{ order.number }}',
        discount_amount: Number({{ order.discount }}),
        products: products,
        user: {
            id: '{{ order.customer.number }}',
            email: '{{ order.customer.email }}'
        }
    });
</script>


LEEEP管理画面の「タグ一覧画面」にて発行いただいたタグの設置ガイドです。

トップページや広告LPなど、タグ編集にて商品マクロを指定しないタグを設置する方法には、以下の2通りがあります。

タグの掲載の箇所の「コードで埋め込む」にて発行されるHTMLコードをコピーし、ECサイト内のコンテンツを表示したい場所にあたるHTMLに貼り付けてください。

タグの掲載の箇所の「URLと位置を指定して掲載する」から、掲載したい場所のURLとCSSセレクターを指定してください。

※最新のLEEEP共通タグがページに埋め込まれている必要があります。

参照:CSSセレクタを確認する方法を教えてください。

商品詳細ページなど、タグ編集にて商品マクロを指定したタグを設置する方法には、「コードで埋め込む」と「URLと位置を指定して掲載する」の2通りがあります。

また、事前準備として下記の「テーマを編集し商品IDを埋め込む」の対応をお願いいたします。

  1. 商品詳細画面のテーマファイルを開く(ショップ管理 > テーマ管理 > 該当テーマの"アクション" > コードの編集 > product > 商品詳細画面)

  2. 任意の位置に以下を追加(ファイルの先頭で構いません)

Plaintext
<div id="leeep-product-id" data-value="{{ product.number }}"></div>

以下のHTMLコードをコピーし、ECサイト内のコンテンツを表示したい場所にあたるHTMLに貼り付けてください。

重要:「tag_id」「leeep-tag」はこちらよりIDを確認の上、「xxxxxxxxxxxxxxxx」を変更してください。

Plaintext
<!-- LEEEP tag start -->
<script src="https://cite.leeep.jp/v2/embed/js" defer></script>
<div id="leeep-tag-xxxxxxxxxxxxxxxxxxxxx"></div>
<script>
    document.addEventListener('DOMContentLoaded', _ => {
        const el = document.getElementById('leeep-product-id');
        const leeepProductId = el ? el.dataset.value ?? '' : '';
        LeeepCite.init({
            tag_id: 'xxxxxxxxxxxxxxxxxxxxx',
            product_id: leeepProductId,
        });
    });
</script>
<!-- LEEEP tag end -->

タグの掲載の箇所の「URLと位置を指定して掲載する」から、商品ページ共通のURLとCSSセレクターを指定してください。

※最新のLEEEP共通タグがページに埋め込まれている必要があります。

参照:CSSセレクタを確認する方法を教えてください。