Content Template(Popup)

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.

Procedure - Template

Piano Content にログインする
右上の日付設定表示の左のModule名をクリックし、出てきたメニューから「CREATE MODULE」をクリックする。
module設定画面に入るので、Collection、Content selectionを適切に設定する。
右ペインのModule名を適切なものに修正し、「SAVE」して「CLOSE」する
右上の「テンプレート編集（ビデオ再生のようなボタン）」をクリック
プレビュー枠下の、STYLES、CUSTOM JSをクリックしてから、以下の Template HTML、Template CSS、Template JAVASCRIPT のコードをコピーしてペーストする
プレビュー枠の下のUpdate previewをクリックし、見た目を確認する
「SAVE」して「CLOSE」する
右上の「設定（歯車のようなアイコン）」をクリックし、表示されたWidget IDをコピーしておく

Template HTML

<!--%
  const item = data.response.items[0];
  const itemImage = item.dominantthumbnail;
%-->
<div id="pianoj-popup" class="pianoj-popup">
  <div class="pianoj-popup-close" onclick="cxj_closeClicck()">
    <svg viewBox="0 0 24 24">
      <path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path>
      <path d="M0 0h24v24h-24z" fill="none"></path>
    </svg>
  </div>
  <div class="pianoj-popup-inner">
    <img class="pianoj-popup-image" tmp:src="{{itemImage}}" tmp:onload="cxj_imgLoaded()"/>
    <div class="pianoj-popup-text-wrap">
      <div class="pianoj-popup-text-inner">
        <div class="pianoj-popup-subtitle">あなたにオススメ</div>
        <div class="pianoj-popup-title">{{item.title}}</div>
      </div>
    </div>
    <a class="pianoj-popup-link" tmp:id="{{cX.CCE.clickTracker(item)}}" tmp:href="{{item.url}}" target="_blank"></a>
  </div>
</div>

Template CSS

#pianoj-popup {
  width: 300px;
  max-width: 300px;
  position: fixed;
  opacity: 0;
  z-index: 1;
  box-shadow: 4px 4px 20px 5px rgba(0,0,0,0.4);
  transform: translateY(150%);
  transition: transform 1s ease-in-out;
  right: 10px;
  bottom: 10px;
}
#pianoj-popup * {
  display: block;
  box-sizing: border-box;
  text-decoration: none;
}
.pianoj-popup-image {
  max-width: 100%;
  margin: 0 !important;
}
.pianoj-popup-text-wrap {
  background-color: #CC6D00;
}
.pianoj-popup-text-inner {
  padding: 0.6em;
}
.pianoj-popup-subtitle {
  padding-bottom: 0.6rem;
  text-decoration: underline !important;
  font-size: 0.8em;
  color: #FFFFFF;
}
.pianoj-popup-title {
  font-size: 1em;
  line-height: 1.2rem;
  color: #FFFFFF;
}
.pianoj-popup-link {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 99998;
}
.pianoj-popup-close {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 0.4rem;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  z-index: 99999;
}
.pianoj-popup-close:hover {
  transform: scale(1.4,1.4);
}
.pianoj-popup-close svg{
  width: 2.5em;
  pointer-events: none;
  vertical-align: top;
  fill: #000000;
}

Template JAVASCRIPT

const cxj_imgLoaded = () => {
  const el = document.querySelector('#pianoj-popup');
  requestAnimationFrame(() => {
    el.style.opacity = "1";
    el.style.transform = "translate3D(0,0,0)" ;
  });
};
const cxj_closeClicck = () => {
  const el = document.querySelector('#pianoj-popup');
  el.style.display = "none";
};

Procedure - HTML

以下のコードをレコメンドを表示するページのHTMLに埋め込みます。

<div id="cxj_popup"></div>
<script type="text/javascript">
cX.CCE.callQueue.push(["run", {
  widgetId: "91b5e5047af8734ce69a69a9b9a54d29dbede658",
  targetElementId: "cxj_popup",
}]);
</script>