Ptengine Experienceのフォームで、選択肢によって違うURLに遷移させる方法! 😉

利用シーン


ポップアップでフォームを作成する際、選択肢によってフォームを送信後、違うURLに遷移させます。
カスタマーサポートやWeb接客として、顧客を案内する際に有効です。

1634127429(1)!

方法


1.コードの挿入

選択肢のあるフォームを作った後、一度ポップアップ編集画面を終了し、画面左下にある「コードモード」を開きます。

そして、下記のコードを貼ってください。

(function(popupId, triggerElementSelector) {
    var waitTimer;
    var currentCampaign;
    function waitForCampaignMount(callback) {
        if (!popupId) return;
        currentCampaign = document.querySelector('#ptxEngage_' + popupId);
        if (!currentCampaign) return;
        if (waitTimer) {
            clearInterval(waitTimer);
            waitTimer = null;
        }
        waitTimer = setInterval(function() {
            if (!currentCampaign.hasChildNodes()) return;
            clearInterval(waitTimer);
            waitTimer = null;
            callback(currentCampaign);
        }, 50);
    }
    function bindEvent(callback) {
        var element = currentCampaign.querySelector(triggerElementSelector);
        element && element.addEventListener('click', callback);
    }
    function handleSubmit() {
        var selectElement = currentCampaign.querySelector('.silex-id-1634020026051-0 select'); //今回使うフォームのフォームID
        if (!selectElement) return;
        switch (selectElement.value) {
            case '選択肢1': //一個目フォームの値
                location.href = 'http://www.ptmind.com'; //一個目の値が対応しているURL
                break;
            case '選択肢2': //二個目フォームの値
                location.href = 'http://www.ptmind.jp'; //二個目の値が太陽しているURL
                break;
            default:
                break;
        }
    }
    waitForCampaignMount(function() {
        bindEvent(handleSubmit);
    });
})('popup_26f3bfa63a61bd3e', '.silex-id-1633955816281-2 a'); //ポップアップのIDとCTAのID

2.コードの変数部分の変更

上記コード内に記載の下記の箇所のものを用意します。
1)フォームID ★1
2)フォームに設定されたドロップダウンの値と、それに対応するURL
3)ポップアップID ★2
4)CTAのID ★1

★1「フォームID」と「CTAのID」の見つけ方

Step1 プレビューを開く

1634127564(1)

Step2プレビューの画面でポップアップを呼び出したあと、ページを右クリックして「検証」を選ぶ(ディベロッパーツールを開く)

Step3 下記の図のマークをクリックしてから、フォームとCTAをクリックしてください。

1634127583(1)
1634127598(1)
1634127615(1)

Step4 選択後、画面の下(または右側)に表示されているコードを確認します。
下図の赤枠のように、一番外側のdivのclassの内容がフォームIDとCTAのIDとなるのでコピーしてください。


★2 ポップアップIDの見つけ方

①ポップアップ編集時に表示される、「表示/停止条件」を開きます。
②選択肢の中に「指定のJavacsriptコードで表示タイミングをコントロール」にチェックを入れます。
③コードが出てきますが、使用するのは赤枠の部分のみ。こちらがポップアップIDとなります。
④文字列だけコピーしたら、こちらのチェックは必ず外してください。

「いいね!」 4