カスタムフィールド用のフォームはログインする必要があります

表示を確認する際は仮アカウントをご登録いただき、リロードいただくか以下のテスト用アカウントでお試しください。

メールアドレス/パスワード: demo@example.com / password

Show Form action / popup (Composer x id)

Cxense is proud to welcome publishers and media companies in Japan, to a seminar at the Royal Norwegian Embassy in Tokyo on May 28th.

As the first Cxense Japan event in 2013 was a great success and attended by over 80 publishers and media contacts, we have decided to host another event this year.

The seminar will provide Cxense customers and contacts in the Japanese publishing world with valuable industry updates, and serve as a networking forum for media companies.

The seminar will feature two Cxense case studies with esteemed guest speakers from DMM.com Lab and MediaGene, as well as an industry update from Cxense's founder Dr. John M. Lervik, and an update and demo of the newly launched Cxense DMP solution by its Product Manager, Mr. Jan Helge Sageflaat coming in from Oslo, Norway, for the event.

As the first Cxense Japan event in 2013 was a great success and attended by over 80 publishers and media contacts, we have decided to host another event this year.

The seminar will provide Cxense customers and contacts in the Japanese publishing world with valuable industry updates, and serve as a networking forum for media companies.

Overview - Show Form action / popup

Composerの標準機能では提供されていないポップアップでカスタムフォームを表示する方法です
カスタムフォーム自体の作成方法はShow Formを使った会員属性取得と同様のため、そちらを先にご参照ください
未ログイン中ユーザにはログインモーダルが表示されるため、ターゲットオーディエンスで除外することを推奨します
UXの観点から、何度も表示するのではなく、ページビューメータ等を併せてご利用ください

Procedure - Experience

(ポップアップ表示したいカスタムフォームは準備できている前提になります)
Piano Composerにログインする
[プロダクト]=>[Composer]メニューを開きます
すでに該当のExperienceが存在する場合は、その「設定」を押下します。まだの場合は、右上の「作成」から「サイトのエクスペリエンス」を作成してください
「JSを実行」カードを使い以下のJavaScriptを貼り付けて保存します
「フォームを表示」カードを使いポップアップ表示させたいカスタムフォームを選択します
「ディスプレイモード」の項目で、タイプを「ページ上のインライン」を選択し、「インラインコンテナのセレクター」に#pianoj_slideinを設定し保存します
※別のセレクター名をご利用になりたい場合は、上記手順で作成したJSを実行カードのelid変数の値を変えてご対応ください

(function(){
  try{
    var elid = "pianoj_slidein";
    var el = document.getElementById(elid) || document.createElement('div');
    el.id = elid;
    el.style.position = "fixed";
    el.style.opacity = "0"; //初期は opacity のみ
    el.style.transform = "translateY(100%)";
    el.style["box-shadow"] = "4px 4px 20px 5px rgba(0,0,0,0.4)";
    el.style["z-index"] = "9999";
    el.style.width = "300px"; // widgetの横幅
    el.style.bottom = "10px"; //下から10px
    el.style.right = "10px"; //右から10px
    el.style.transition = "transform 1.5s, opacity 1.5s";
    if(!document.getElementById(elid)) {
      document.body.insertAdjacentElement("beforeend", el);
    }

    // To synchronize the end of widget drawing
    window.addEventListener("message", function(event) {
      try {
        var parsed = JSON.parse(event.data);
        if (parsed.event === "cfFormImpression") {
          requestAnimationFrame(function () {
            el.style.transform = "translate3d(0,0,0)";
            el.style.opacity = "1";
          });
        }
        if (parsed.event === "closed") {
          el.remove();
        }
      } catch (e) {}
    });
  } catch(e) {console.log(e); }
})();