自社サイトにチケット販売を追加

はじめに

ウェブサイト上で、ページの上にチェックアウトを重ねて表示する形で購入フローを追加できます。

基本設定

1. ウェブサイト上に、通常のリンクとしてFientaのイベントページへのリンクを追加します。例：

   <a href="https://fienta.com/event-name">チケットを購入</a>

2. 次のコードをウェブサイトに追加します。これにより、Fientaイベントへのリンクがウェブサイト上で埋め込み表示されます。

   <script src="https://fienta.com/embed.js"></script>

同じイベント、または異なるFientaイベントへの複数のリンクをウェブサイト上に配置できます。
embed.jsは1ページにつき1回だけ読み込んでください。

embedモードでの同意とトラッキング

Fienta Embed は、お客様のウェブサイト上で訪問者が選択した同意設定を尊重します。利用可能な場合は、IAB TCF の同意シグナルを使用します。TCF がない場合でも、Cookiebot、CookieYes、OneTrust など一般的な CMP から同意情報を読み取れます。

サポートされている同意シグナルがない場合、トラッキングは拒否またはデフォルトのモードのままとなり、同意が得られるまでマーケティングおよび分析イベントは有効になりません。

通常の構成では、追加のカスタム統合コードは不要です。CMPが正しく設定され、embed.jsより前にページ上で読み込まれていることだけ確認してください。

カスタマイズ

Embed の背景色、角丸、そのほかのパラメータを変更するには、次の例のように JavaScript オブジェクトを定義してください。ここに示している値はデフォルト値です。

<script>
window.fientaSettings = {
    // ライトボックスの背景色
    background: 'rgba(0,0,0,0.5)',
    // モーダル内容の角丸
    border_radius: '5px',
    // Fientaイベントページへのリンクを指すセレクタ
    link_selector: 'a[href*="fienta.com"]',
    // 参照元名
    utm_source: 'homepage',
};
</script>
<script src="https://fienta.com/embed.js"></script>

実装時には、変更したいパラメータだけを残してください。

イベント説明と画像の表示

デフォルトでは、Embed にはイベント説明は含まれません。`window.fientaSettings` に次の行を追加すると有効にできます。

descriptionEnabled: true,

説明を初期表示にするには、次を追加します。

step: 'description',

イベント画像を表示するには、次を追加します。

imageEnabled: true,

購入者のメールアドレスを渡すには：

email: '[email protected]',

特定のチケットを事前選択する

複数のチケット種別がある場合、最初はどれも選択されない状態で開きます。URL に `ticket` パラメータを追加すると、特定のチケット種別を事前選択できます。例：

<a href="https://fienta.com/event-name?ticket=1234">チケットを購入</a>

チケット種別IDは、編集時のブラウザのアドレスバーで確認できます。例：https://fienta.com/my/ticket_types/1234/edit

「完売」表示と残り枚数の表示

ページの読み込み時とチケット購入のたびに、onTicketsAvailableReadyイベントが発火します。これを使って残り枚数を表示したり、販売終了時にリンクを無効化するなどHTMLを変更できます。

<script>
window.fientaSettings = {
 onTicketsAvailableReady: function(elem, count) {
 // elem - fienta.comのイベントを指すHTMLのaタグ
 // count - 販売可能なチケット枚数。取り得る値:
 // true - 50枚より多く在庫がある場合
 // 1 .. 50 - 残り枚数
 // 0 - イベントは完売
 // false - 販売終了

// ここにコードを記述
 }
}
</script>
<script src="https://fienta.com/embed.js"></script>

完全なコード例

<script>
window.fientaSettings = {
 background: 'rgba(255,0,0,0.5)',
 border_radius: '0',
 onTicketsAvailableReady: function(elem, count) {
 if (count === true) {
 // 50枚より多く在庫があります
 }
 else if (count > 0) {
 elem.text('残り' + count + '枚');
 }
 else if (count === 0) {
 elem.addClass('disabled').removeAttr('href').text('完売');
 }
 else if (count === false) {
 elem.addClass('disabled').removeAttr('href').text('販売終了');
 }
 }
}
</script>
<script src="https://fienta.com/embed.js"></script>

URLからembedを開く

Embed を自動的に開くページへのリンクを共有できます。

https://your-website.com/page?openEmbed=https://fienta.com/event-name

特定のコンテンツ管理システムへの追加

• Wix

• Squarespace