CitrusAdのバナーXクリエイターでは、小売店や広告主向けにプレビュー機能を提供しています。この機能では、以下のことが可能です。
- 広告主は、キャンペーンを開始する前にバナーをプレビューできる
- 広告主は、キャンペーンマネージャーでバナーを確認できる
- 小売業者は、バナーのウェブサイトへの掲載を承認する前にそのバナーを確認できる
バナーxのレンダリングをカスタマイズしたい小売業者は、CitrusADがウィンドウ内でインラインフレーム化するサイトでホストされているプレビューアを通じて、バナープレビューアをCitrusADのプラットフォームに統合できます。
これは小売業者がホストします
小売業者は、自分が所有し管理する URL またはリンクでこれをホストする必要があります。
これにより、サイトやデザインの変更に合わせて柔軟に管理・更新でき、変更を加える際にCitrusAdに頼る必要がありません。
通常、サイト上の非表示 URL (retailer.com/banner-previewer など) でホストすることをお勧めします。しかし、どこでホストするかは自由に決めることができます。
また、CitrusAdが配信する画像やテキストをお客様の本番サイトにどのようにレンダリングするかも、自由に変更できます。本番サイトのバナーに変更を加えると、その変更は、外部プレビューアを通じてCitrusAdプラットフォームに即座に反映されます。
![Screen Shot 2021-02-05 at 3.47.48 pm (1).png 1200](https://files.readme.io/4dd3300-Screen_Shot_2021-02-05_at_3.47.48_pm_1.png)
外部プレビューアの画像
プレビューの仕様を組み込むには
CitrusAdから渡されたコンテンツを外部プレビューアに表示するには、小売業者が所有・管理する別のページで、独自のバナープレビュワーをホストする必要があります。次をお勧めします: https://www.<retailer.com>/banner-preview/bannerx
.
OpenAPI3の仕様は以下のようになります。
openapi: "3.0.0"
info:
version: 0.0.1
title: BannerX Preview
license:
name: MIT
paths:
'/banner-preview':
get:
summary: Render a preview of a bannerX
operationId: getBannerXPreview
tags:
- campaign
parameters:
- name: "contentStandardId"
in: query
description: Content Standard ID to use for rendering. Can be ignored for external previewers if only 1 content standard is available.
examples:
uat:
value: "bd59be89-b13f-440f-a57e-0e5a481bec8b"
summary: "example UAT content standard ID"
required: true
schema:
type: string
- name: "slotId"
in: query
description: Slot ID defined within the content standard to use for rendering. Can be ignored for external previewers if only 1 slot is available.
examples:
uat:
value: "left_ribbon"
summary: "slot ID"
required: true
schema:
type: string
- name: "slotType"
in: query
description: Banner slot type to use for rendering. Can be ignored for external previewers if only 1 slot type is available.
examples:
uat:
value: "DOUBLE_TILE"
summary: "banner slot type"
required: true
schema:
type: string
enum:
- UNDEFINED
- BANNER
- SINGLE_TILE
- DOUBLE_TILE
- name: "headingText"
in: query
description: Heading text to insert into the banner rendering.
examples:
uat:
value: "Juicy apples!"
summary: "banner heading text"
required: false
schema:
type: string
- name: "bannerText"
in: query
description: Banner text to insert into the banner rendering.
required: false
examples:
uat:
value: "Citrus UAT Banner"
summary: "banner text"
schema:
type: string
- name: "bannerTextColour"
in: query
description: Banner text colour in RGB HEX format.
examples:
uat:
value: "000000"
summary: "banner text colour"
required: false
schema:
type: string
- name: "ctaEnabled"
in: query
description: Flag to designate that CTA button should be rendered.
examples:
uat:
value: true
summary: "banner CTA enabled flag"
required: false
schema:
type: boolean
- name: "ctaLink"
in: query
description: Link for Call-To-Action element.
examples:
uat:
value: "https://www.retailer.com/promo/6ru0GM5"
summary: "banner CTA link"
required: false
schema:
type: string
- name: "backgroundColour"
in: query
description: Banner text colour in RGB HEX format.
examples:
uat:
value: "000000"
summary: "banner background colour"
required: false
schema:
type: string
- name: "backgroundImage"
in: query
description: Background image URL to render in the banner.
examples:
uat:
value: "https://cdn.flavedo.io/s/7b965e85-64ae-4574-9d6d-4c45c448668e"
summary: "background image URL"
required: false
schema:
type: string
- name: "backgroundImagePosition"
in: query
description: Background image position.
examples:
uat:
value: "TOP_ALIGNED"
summary: "background image position"
required: false
schema:
type: string
enum:
- UNDEFINED
- FILL
- REPEATING
- LEFT_ALIGNED
- RIGHT_ALIGNED
- TOP_ALIGNED
- BOTTOM_ALIGNED
- name: "secondaryBackgroundImage"
in: query
description: Secondary background image URL to render in the banner.
examples:
uat:
value: "https://cdn.flavedo.io/s/7b965e85-64ae-4574-9d6d-4c45c448668e"
summary: "secondary background image URL"
required: false
schema:
type: string
- name: "secondaryBackgroundImagePosition"
in: query
description: Secondary background image position.
examples:
uat:
value: "TOP_ALIGNED"
summary: "secondary background image position"
required: false
schema:
type: string
enum:
- UNDEFINED
- FILL
- REPEATING
- LEFT_ALIGNED
- RIGHT_ALIGNED
- TOP_ALIGNED
- BOTTOM_ALIGNED
- name: "heroImage"
in: query
description: Primary hero image URL.
examples:
uat:
value: "https://cdn.flavedo.io/s/7b965e85-64ae-4574-9d6d-4c45c448668e"
summary: "primary hero image URL"
required: false
schema:
type: string
- name: "heroImageAltText"
in: query
description: Primary hero image alt text.
examples:
uat:
value: "New flavour chips"
summary: "hero image alt text"
required: false
schema:
type: string
- name: "secondaryHeroImage"
in: query
description: Secondary hero image URL.
examples:
uat:
value: "https://cdn.flavedo.io/s/02c1440c-bad4-4cf8-a208-be910827e30a"
summary: "secondary hero image URL"
required: false
schema:
type: string
- name: "secondaryHeroImageAltText"
in: query
description: Secondary hero image alt text.
examples:
uat:
value: "New flavour sauce"
summary: "secondary hero image alt text"
required: false
schema:
type: string
- name: "secondaryHeroMode"
in: query
description: Secondary hero image display mode.
examples:
uat:
value: "BLOCK"
summary: "secondary hero image mode"
required: false
schema:
type: string
enum:
- UNDEFINED
- BLOCK
- LANDSCAPE
- name: "gtins"
in: query
description: |
List of a subset of GTINs attached to the campaign.
Please note that this parameter is marked VOLATILE and may change or be deprecated in the future.
While we will inform prior to any changes to the API surface,
anyone relying on this parameter should be aware of it's volatility.
examples:
uat:
value: [ "7913494","6815686" ]
summary: "gtin list"
required: false
schema:
type: array
items:
type: string
style: form
explode: false
responses:
'200':
description: OK response
'400':
description: Bad request error response
content:
application/json:
schema:
properties:
error:
type: string
description: Error message.
'404':
description: Not found error response
content:
application/json:
schema:
properties:
error:
type: string
description: Error message.
'500':
description: Internal server error response
content:
application/json:
schema:
properties:
error:
type: string
description: Error message.
バナーは、Banner X APIのレスポンスの機能内に収まっている必要があります。
この仕様は変更される可能性があります。変更された場合は、実装前にインテグレータに通知されます。
ユーザーがCitrusAdプラットフォームでプレビューアを読み込むと、定義されたパラメータのセットでGETリクエストが作成され、プレビューアにレンダリングされます。これをCitrusAdのプラットフォーム内でiframe化します。
このリクエストは以下の例のようになります。
https://www.[YOUR_RETAILER_SITE]/bannerx?contentStandardId=bd59be89-b13f-440f-a57e-0e5a481bec8b&slotId=Search_in_grid_1&slotType=DoubleTile&headingText=Milk&bannerText=Milk&bannerTextColour=ecdfdf&backgroundColour=d55525&backgroundImagePosition=topaligned&secondaryBackgroundImagePosition=topaligned&heroImage=https%3A%2F%2Fstorage.googleapis.com%2Fcitrus-banner-images-pending-australia-southeast1%2Fstaging%2F74fc5966-8d8d-487e-b2a9-45f994957815&heroImageAltText=test&secondaryHeroImage=https%3A%2F%2Fstorage.googleapis.com%2Fcitrus-banner-images-pending-australia-southeast1%2Fstaging%2F2bfd0dcb-27d5-4469-a53d-c1681f675c6e&secondaryHeroImageAltText=test&secondaryHeroMode=landscape>ins=7459770>ins=59398>ins=7895365