スタートガイド

STEP3 パーソナライズを設置する

パーソナライズの作成を終えたら、ページにパーソナライズを設置します。

ポップアップもしくはiframe方式で設置する場合は「JSタグ」を、リンク方式で設置する場合は「パーソナライズURL」をパーソナライズを設置するページに貼ります。

content_023_01.jpg

設置するページごとのパーソナライズの設置手順をご紹介します。

LPにパーソナライズを設置する場合

ecforce profile管理画面の【ドメイン・タグ発行】画面にて、「JSタグ」をコピーします。

content_023_02.jpg

ecforce管理画面の【マーケティング管理 > LP 管理 > LP テンプレート管理 > 対象LPの編集】画面の「ヘッダー編集」に、コピーした「JSタグ」を貼り付けます。

content_023_04.jpg

ecforce管理画面の【マーケティング管理 > LP 管理 > LP テンプレート管理 > 対象LPの編集】画面の「JavaScript 編集」に、以下の記述をします。

window.personalize = {};
window.personalize.lp = new function () {

    var self = this;

    /***** 編集が必要な部分 *****/

    // 各要素のセレクタ
    var elementSelectors = {
        "lp": "*****LP要素のセレクタ*****"
        , "form": "*****フォーム要素のセレクタ*****"
        , "result": "*****診断結果要素のセレクタ*****"
    };

    // 結果表示処理
    this.showResult = function () {

        // *****PSL_COMPLETE_DATAを利用して診断結果を作成し表示する*****

    };

    // 選択する商品のvariant_idを返す処理
    this.getVariantId = function () {

        // *****PSL_COMPLETE_DATAを利用して選択する商品のvariant_idを返す*****
        // アクションで指定する場合は空文字を返すようにする
        return "";

    };

    // 選択する商品のproduct_idを返す処理
    this.getProductId = function () {

        // *****PSL_COMPLETE_DATAを利用して選択する商品のproduct_idを返す*****
        // アクションで指定する場合は空文字を返すようにする
        return "";

    };

    // 選択する商品の個数を返す処理
    this.getVariantQuantity = function () {

        // *****PSL_COMPLETE_DATAを利用して選択する商品の個数を返す*****
        // アクションで指定する場合は0を返すようにする
        return 0;

    };

    // 診断を受けなおす際の開始ページ番号
    this.getRedoPageId = function () {

        // *****ecforce profileの管理画面より取得したページIDを返す*****
        return 0;

    };

    /***** 編集が不要な部分 *****/

    // アクション処理
    this.action = function () {

        // 回答結果をセッションに保存する
        sessionStorage.setItem("psl_result", JSON.stringify(PSL_COMPLETE_DATA));

        // パーソナライズタグの挿入
        insertPersonalizeTag();

        // 結果表示
        self.showResult();
        document.querySelector(elementSelectors.result).style.display = "block";

        // フォーム表示
        document.querySelector(elementSelectors.form).style.display = "block";

        // 商品選択
        self.selectProductAndQuantity(self.getProductId(), self.getVariantQuantity());
        self.selectVariantAndQuantity(self.getVariantId(), self.getVariantQuantity());

        // パーソナライズ非表示
        self.hidePersonalize();

    };

    // 診断を修正する
    this.redo = function () {

        PSL_JS.showPopup({
            "aid_h": PSL_COMPLETE_DATA.aid_h
            , "page": self.getRedoPageId()
        });

        // LPスクロール禁止
        document.querySelector("html").style.overflow = "hidden";

    };

    // パーソナライズ表示
    this.showPersonalize = function () {

        // ポップアップ表示
        PSL_JS.showPopup();

        // LPスクロール禁止
        document.querySelector("html").style.overflow = "hidden";

    };

    // パーソナライズ非表示
    this.hidePersonalize = function () {

        // LPスクロール許可
        document.querySelector("html").style.overflow = "auto";

        // ページトップにスクロール
        window.scrollTo(0, 0);

        // ポップアップ非表示
        PSL_JS.closePopup();

    };

    // 商品、個数選択
  this.selectProductAndQuantity = function (product_id, quantity) {

        // 商品を選択する
        if (product_id) {
            window.ec_force.changeProductFromOtherService(String(product_id));
        }

        // 個数を選択する
        if (quantity) {
            window.ec_force.changeQuantityFromOtherService(String(quantity));
        }

    };

    var selectVariantTimer = null;
    var selectVariantQuantityTimer = null;
    this.selectVariantAndQuantity = function (variant_id, quantity) {

        // 商品を選択する
        if (variant_id) {
            selectVariantTimer = setInterval(function () {
                var variantElement = document.querySelector('[name="order[order_items_attributes][][variant_id]"]');
              if (variantElement) {
                    clearInterval(selectVariantTimer);

                    var variantSelectElement = document.querySelector('.variant_select');
                    variantSelectElement?.setAttribute('value', String(variant_id));
                    triggerEvent(variantSelectElement, "change");

                    variantElement.setAttribute('value', String(variant_id));
                    triggerEvent(variantElement, "change");

                    var ele = document.querySelector('#order_billing_address_attributes_name1');
                    triggerEvent(ele, "change");
                }
            }, 500);
        }

        // 個数を選択する
        if (quantity) {
            selectVariantQuantityTimer = setInterval(function () {
                var variantQuantityElement = document.querySelector('[name="order[order_items_attributes][][quantity]"]');
                if (variantQuantityElement) {
                  clearInterval(selectVariantQuantityTimer);

                    var variantQuantitySelectElement = document.querySelector('.quantity_select');
                    variantQuantitySelectElement?.setAttribute('value', String(quantity));
                    triggerEvent(variantQuantitySelectElement, "change");

                    variantQuantityElement.setAttribute('value', String(quantity));
                    triggerEvent(variantQuantityElement, "change");

                    var ele = document.querySelector('#order_billing_address_attributes_name1');
                    triggerEvent(ele, "change");
                }
            }, 500);
        }

    };

    /***** private *****/

    // イベントトリガー
    var triggerEvent = function (element, event) {

        try {
            if (document.createEvent) {
                var evt = document.createEvent("HTMLEvents");
                evt.initEvent(event, true, true);
                return element.dispatchEvent(evt);
            } else {
                var evt = document.createEventObject();
                return element.fireEvent("on"+event, evt)
            }
        } catch (ex) {}

    };

    // パーソナライズタグ挿入
    var insertPersonalizeTag = function () {

        // 既存タグの削除
        document.querySelector(elementSelectors.form).querySelector("[name='psl_aid']")?.remove();
        document.querySelector(elementSelectors.form).querySelector("[name='psl_key']")?.remove();

        // タグの挿入
        {
            var input = document.createElement("input");
            input.setAttribute("name", "psl_aid");
            input.setAttribute("value", PSL_COMPLETE_DATA.aid);
            document.querySelector(elementSelectors.form).appendChild(input);
        }
        {
            var input = document.createElement("input");
            input.setAttribute("name", "psl_key");
            input.setAttribute("value", PSL_COMPLETE_DATA.key);
            document.querySelector(elementSelectors.form).appendChild(input);
        }

    };

    // 初期処理
    var init = function () {

        var pslResult = sessionStorage.getItem("psl_result");
        if (pslResult) {
            // 復元

            // 回答結果
            window.PSL_COMPLETE_DATA = JSON.parse(pslResult);

            // 結果表示
            self.action();

            // フォームにスクロールする
            document.querySelector(elementSelectors.form).scrollIntoView(true);

        } else {
          // 初回

            // フォーム非表示
            document.querySelector(elementSelectors.form).style.display = "none";

            // 診断結果非表示
            document.querySelector(elementSelectors.result).style.display = "none";

            // パーソナライズ表示
            self.showPersonalize();

        }

    };

    // 初期処理
    init();  

};

上記を記述すると、LPアクセスからパーソナライズの回答完了まで以下の流れで動作します。

  1. LPにアクセスする
  2. LP部分と購入フォームは表示されずにパーソナライズのトップページが表示される
  3. パーソナライズの回答が完了する
  4. 自動的にパーソナライズが閉じ、LPテンプレートの「ボディー編集」に記述したLPと診断結果および購入フォームが表示される購入フォームにはLPテンプレートもしくはアクションで設定した商品と商品の個数が選択されている状態)

注意点

・記述内の「/***** 編集が必要な部分 *****/」は、記述をする必要があります
・本記述はあくまでも一例ですので、ご要望の動作になるように編集をしてご使用ください

回答データの確認方法について

パーソナライズの回答データは変数「PSL_COMPLETE_DATA」内にあります。
回答データの中身を確認したい場合は、アクションに「console.log(PSL_COMPLETE_DATA);」と記述してください。
回答完了後にブラウザのコンソールにて「PSL_COMPLETE_DATA」がJSONで出力され、内容を確認することができます。

ショップページにパーソナライズを設置する場合

ecforce profile管理画面の【ドメイン・タグ発行】画面にて、「パーソナライズURL」をコピーします。

content_023_03.jpg

ecforce管理画面の【ショップ管理 > テーマ管理 > 対象テーマのアクション > コードの編集】画面にて、任意のファイルにコピーした「パーソナライズURL」を貼ります。

マイページにパーソナライズを設置する場合

ecforce profile管理画面の【ドメイン・タグ発行】画面にて、「JSタグ」をコピーします。

content_023_02.jpg

ecforce管理画面の【ショップ管理 > テーマ管理 > 対象テーマのアクション > コードの編集】画面にて、「定期注文詳細画面 商品情報の編集」のファイルにコピーした「JSタグ」を貼ります。

この記事の目次

このセクションの記事

スタートガイド