追従型のポップアップ機能（有料）にボタンを2つ設置する

1個のポップアップで異なる遷移先を指定することができます。

手順

1. Version編集画面＞「ポップアップ」をクリック

2. 追従型を選択

3. 「+」を押す

スクリーンショット 2024-11-14 16.09.05

4．「プリセット」＞「ポップアップ検索」欄で、下記を入力し、検索する

リンク2個設置

5 . 下記いずれかのWidgetの右側の「作成」をクリック

リンクボタン2個設置（テキスト版）
リンク2個設置（画像版）

スクリーンショット 2024-11-13 13.04.16

6．基本設定と表示条件を設定

基本

配信割合：「1」以上に変更する
リンク：HTML編集画面に遷移先リンクを貼り付ける
画像：HTML編集画面に画像リンクを貼り付ける

HTML：HTML編集画面の最下部に下記コードを貼り付ける
※ CV計測する際に必要なパラメータを引き継ぐための設定です。

<script>
var sbExtendId = sbExtendId || {};
(function (_) {
    _.setURL = function () {
        const extend = new URLSearchParams({
            'squadbeyond_uid': '.js-v-id',
            'sb_article_uid': '.js-a-id',
        });

        Array.from(document.querySelectorAll('a'), link => {
            let href = new URL(link.href);
            let params = href.searchParams;
            const current = new URLSearchParams(location.search);
            ;[...current.entries()].forEach((param, i) => {
                params.set(param[0], param[1]);
            });
            ;[...extend.entries()].forEach((param, i) => {
                let target = window.parent.document.querySelector(param[1]);
                if (target) params.set(param[0], target.dataset.value);
            });
            link.href = href;
        });
    }
})(sbExtendId);
sbExtendId.setURL();
</script>

b. 表示条件

1. 1. アニメーションを設定する
  2. スクロールで表示：ページ内の◯％の位置で表示させるかを設定可能です。

8．「下書き反映」する

9 . ポップアップを表示するVersion内で2つのボタンをONにする

10. プレビューで確認後、「本番反映」をクリックします

追従型のポップアップ機能（有料）にボタンを2つ設置する

1個のポップアップで異なる遷移先を指定することができます。

手順

関連FAQ