LEEEP ヘルプセンター

thumbnail

makeshop（ベーシックモード）

LEEEP2024-11-12

パートナー様の運営するサイトに下記指定のタグ及びスクリプトを設置いただくことで、LEEEPでイベントを集計することができます。

※ こちらのマニュアルはベーシックモードをご利用されている前提となります。

1．共通タグ

LEEEP経由でコンテンツを表示したり、コンテンツの閲覧などのイベントを取得するために必要なタグになります。

  1. ショップ構築 > 設定 > SEO・SNS・マーケティングのタグの設定をクリック

  1. アクセス解析用のタグを設定をクリック

  1. アクセス解析タグの入力（headタグ用）に以下のコードを設定

重要：「site_id」はこちらより自身のIDを確認の上、2箇所ある「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', _ => {
        LeeepCite.init({site_id: 'xxxxxxxxxxxxxxxx', product_id: leeepProductId, uid:'[MEMBER_ID]'
    });
</script>

2．計測タグ

LEEEP管理画面上で効果分析を行うために必要な注文データを取得するタグになります。

 

  1. ショップ構築 > 設定 > SEO・SNS・マーケティングのタグの設定をクリック

  1. コンバージョンタグの設定をクリック

  • 出力設定：「出力する」にチェック

  • コンバージョンタグ名：「LEEEP計測タグ」

  • 出力画面：「注文完了画面」を選択

  • 出力箇所：「body直後」を選択

  • コンバージョンタグ設定（以下参照）

開始部

Plaintext
<script>
var leeep_products = [];

繰り返し部

Plaintext
leeep_products.push({
    product_id: '[ITEM_CD_SYS]',
    sku_code: '[ITEM_CD_SYS]',
    sales_price: Number([ITEM_PRICE]),
    quantity: Number([ITEM_COUNT]),
    name: '[ITEM_NAME]',
});

区切り文字：空白

終了部

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

Plaintext
ParteTracking.order({
    site_id: 'xxxxxxxxxxxxxxxx',
    order_id: '[ORDER_NUM]',
    products: leeep_products,
    uid: '[USER_ID]',
});
</script>

3．コンテンツ掲載タグ

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

・トップページに投稿を掲載する

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

コードで埋め込む（トップページ）

makeshopの管理画面で「メインメニュー > ショップデザイン > HTML編集」にアクセスし、利用中のデザインセットの編集画面に移動してください。その後、LEEEP管理画面のタグ編集画面から、設置するタグをコピーします。

デザインセットの編集にて、トップページにあたるHTMLの投稿一覧を表示したい箇所にLEEEP管理画面のタグ編集でコピーしたタグを設置します。

URLと位置を指定して掲載する（トップページ）

掲載したい場所のURLとCSSセレクターを指定することで、ページの条件に一致する箇所にコンテンツを表示できます。

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

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

・商品詳細ページに投稿を掲載する

商品詳細ページなどにタグ編集で商品マクロを指定したタグを設置するには、「コードで埋め込む」方法でご対応ください。

コードで埋め込む（商品詳細ページ）

  1. 管理画面にログイン：MakeShopの管理画面にアクセスし、ログインします。

  2. ショップデザインの設定：メインメニューから「ショップデザイン」を選択します。

  3. 商品詳細画面の管理：「テンプレート選択・編集」セクション内の「内部ページ編集Ⅰ」から「商品詳細画面管理」を選択します。

    参照：MSマニュアル

  4. 編集するカテゴリーの選択：編集したいカテゴリーをプルダウンメニューから選択します。全ての商品ページを共通で編集する場合は、「すべての商品ページ」を選択してください。

  5. HTMLの編集：表示されるエディタ内で、商品詳細ページのHTMLを編集します。

  6. LEEEPタグの設置：HTML内のコンテンツを表示したい箇所に、以下のコードを入力します。

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

Plaintext
<!-- LEEEP tag start -->
<script src="https://cite.leeep.jp/v2/embed/js" defer></script>
<div id="leeep-tag-xxxxxxxxxxxxxxxx"></div>
<script>
    const leeepProductId = (window.location.href.match("\/shopdetail\/([^/?]+)") || [])[1];
    document.addEventListener('DOMContentLoaded', _ => {
        LeeepCite.init({
            tag_id: 'xxxxxxxxxxxxxxxx',
            product_id: leeepProductId,
        });
    });
</script>
<!-- LEEEP tag end -->

  1. 編集後は「保存」ボタンをクリックして変更を適用してください。