Issue

ランディングページへの流入経路ごとに、一部内容やコンバージョンのURLを切り替えたい。

Solution

弊社が制作を請け負ったサイトであれば簡単に実現できます。その前提でお話を進めます。

JetEngineのDynamick VisibilityでURLパラメーターに含まれる文字により表示を切り替える

今回はランディングページの流入経路ごとという条件ですので、Google Analytics解析用としてURLにキャンペーンのパラメーターが設定してある前提で話を進めます。

1. ランディングページをElementorで開きます。
2. 条件により表示あるいは非表示にしたい要素を選択します。
3. 左側のパネルで『Advancedタブ』をクリックします。
4. Dynamick VisibilityのEnableを『はい』に切り替えます。
5. Visibility condition typeを選択します。この後設定する条件に合う時に『表示』としたいならば『Show element it condition met』を、『非表示』としたいならば『Hide element it condition met』を選択します。
6. Conditionで『Equal』を選択します。
7. Fieldで右にあるアイコンをクリックし『Macros』を選択します。
8. 設定のMacrosで『Query Variable』を選択します。
9. Variable Nameにパラメーターの変数名（例えばキャンペーンIDであれば『utm_id』）を入力します。
10. Valueにパラメーターの値（例えばキャンペーンIDが『123』であれば『123』）を入力します。

以上で、LP訪問者のURLパラメーターにより要素の表示非表示を切り分けられます。

キャンペーンID（utm_id）ごとに一部の表示を変えたり、キャンペーンソース（utm_source）やキャンペーン媒体（utm_medium）ごとに表示を変えることができます。

実践的に解説

通常（検索などで訪れた方）はコンバージョンリンク先を『https://◯◯.com/000』としているLPで、流入経路1の時は『https://◯◯.com/001』に、経路2の時は『https://◯◯.com/002』にリンクするよう設定します。

ボタンを3つ配置

通常時・キャンペーン001用・キャンペーン002用の3つのボタンを用意します。それぞれにリンクURLを設定します。

キャンペーン001用ボタンにDynamick Visibilityを設定

Visibility condition typeを『Show element it condition met』とし、Variable Nameを『utm_id』、Valueを『001』とします。この設定で流入経路1から訪れたユーザーには表示され、それ以外では非表示となります。

キャンペーン002用ボタンにDynamick Visibilityを設定

同様にVisibility condition typeを『Show element it condition met』とし、Variable Nameを『utm_id』、Valueを『002』とします。この設定で流入経路2から訪れたユーザーには表示され、それ以外では非表示となります。

通常時ボタンにDynamick Visibilityを設定

Visibility condition typeを『Hide element it condition met』とし、Variable Nameを『utm_id』、Valueを『001』とします。続いて『項目を追加』をクリックし、その下にあるRelationで『or』を選択します。追加された項目にもMacrosを設定し、Variable Nameを『utm_id』、Valueを『002』と入力します。

これにより、流入経路1または流入経路2から訪れた人には通常時ボタンは非表示となります。

キャンペーンIDに限らず設定できます

折込チラシからの流入は◯◯、Google広告からの流入は◯◯のように、IDに限らずキャンペーンソースやキャンペーン媒体、キャンペーンネームなどに対して自由に設定可能です。

すべての要素（ウィジェット）に設定できます

Dynamick Visibilityはボタンに限らずすべての要素で設定できます。コンテナにも設定できます。例えばキャンペーン『UETAY』から訪れたユーザーだけに、『～UETAYAを見てお申し込みの方にだけの特典～ 30%OFF!!』などの文言を表示し、それ用のFormを表示するなども可能です。

やり過ぎ注意

Dynamick Visibilityを使えばいくらでもきめ細かく表示を切り分けることができます。が、やり過ぎると混乱して設定ミスが生じやすくなるのでご注意ください。特にキャンペーンの追加でボタンを増やした時には、通常時ボタンからそのキャンペーンを除外する設定を忘れないようにしましょう。

最後に

Crocoblockのヘルプにも説明がございますので参照ください。

動的可視性を使用してURLに基づいてセクションを表示または非表示にする方法 — JetEngine |クロコブロック (crocoblock.com)

Dynamick VisibilityはデフォルトでOFFになっています。初めて使用する方はダッシュボードからONにしてください。詳細は上記ヘルプページをご参照ください。