การผสานรวมตัวแสดงแบนเนอร์ X ของคุณ

ในผู้สร้าง Banner X ของเรา เราขอเสนอโปรแกรมแสดงตัวอย่างสำหรับผู้ค้าปลีกและผู้โฆษณา ซึ่งช่วยให้:

  • ผู้โฆษณาเพื่อดูตัวอย่างรูปลักษณ์ของแบนเนอร์ก่อนเปิดตัวแคมเปญ
  • ผู้โฆษณาเพื่อดูแบนเนอร์ของพวกเขาในตัวจัดการแคมเปญ
  • ผู้ค้าปลีกต้องตรวจสอบแบนเนอร์ก่อนอนุมัติให้ปรากฏบนเว็บไซต์

สำหรับผู้ค้าปลีกที่ต้องการปรับแต่งการแสดงผลของแบนเนอร์ x คุณสามารถรวมตัวแสดงตัวอย่างแบนเนอร์ของคุณลงในแพลตฟอร์มของเราผ่านตัวแสดงตัวอย่างที่โฮสต์บนเว็บไซต์ของคุณที่ iframes ในหน้าต่างของแพลตฟอร์ม

🚧

นี่คือร้านค้าปลีกที่โฮสต์

ในฐานะผู้ค้าปลีก คุณจะต้องโฮสต์สิ่งนี้ใน URL หรือลิงก์ที่คุณเป็นเจ้าของและจัดการ

การกระทำนี้ช่วยให้คุณมีความยืดหยุ่นอย่างเต็มที่ในการจัดการและอัปเดตสิ่งนี้เมื่อไซต์ของคุณและการออกแบบของไซต์เปลี่ยนไป ซึ่งทำให้ไม่ต้องพึ่งพา CitrusAd เมื่อคุณต้องการทำการเปลี่ยนแปลง

โดยทั่วไป เราแนะนำให้โฮสต์สิ่งนี้บนไซต์ของคุณที่ URL ที่ซ่อนอยู่ เช่น retailer.com/banner-previewerแต่ก็ขึ้นอยู่กับคุณจะตัดสินใจโฮสต์ที่ไหน

คุณยังสามารถอัปเดตวิธีแสดงรูปภาพและข้อความที่ CitrusAd แสดงบนเว็บไซต์ที่ใช้งานจริง การเปลี่ยนแปลงใดๆ ที่ทำกับแบนเนอร์บนไซต์สดควรมีผลทันทีในแพลตฟอร์ม CitrusAd ผ่านโปรแกรมแสดงตัวอย่างภายนอกของคุณ

1200

รูปตัวแสดงตัวอย่างภายนอก

วิธีผสานรวมข้อกำหนดการแสดงตัวอย่าง

ในการแสดงเนื้อหาที่ผ่านแพลตฟอร์มของเราไปยังโปรแกรมแสดงตัวอย่างภายนอกของคุณ คุณจะต้องโฮสต์โปรแกรมแสดงตัวอย่างแบนเนอร์แยกของคุณเองในหน้าแยกต่างหากที่ผู้ค้าปลีกเป็นเจ้าของและจัดการ เราขอแนะนํา https://www.<retailer.com>/banner-preview/bannerx.

ข้อมูลจำเพาะ OpenAPI3 สามารถดูได้ด้านล่าง:

openapi: "3.0.3"
info:
  version: 0.0.2
  title: BannerX Preview
  description: |
    Specification for BannerX preview to be implemented by retailer.

    In our Banner X creator, we offer a previewer for retailers and advertisers which enables:

    - The advertiser to preview their banner’s appearance before launching their campaign
    - The advertiser to view their banner in the campaign manager
    - The retailer to review the banner before approving it to appear on their website.
    - For any retailers wishing to customise the rendering of banner x, you are able to integrate your banner previewer into CitrusAd's platform through a previewer hosted on your site that CitrusAd iframes in the window.

     To display the content passed by our platform to your external previewer, you will need to host your own isolated banner previewer on a separate page owned and managed by the retailer. We suggest https://www.<retailer.com>/banner-preview/bannerx.

paths:
  "/banner-preview/bannerx":
    get:
      summary: Render a preview of BannerX content
      operationId: getBannerXPreview
      tags:
        - retailer
      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:
            content-standard-id:
              value: "bd59be89-b13f-440f-a57e-0e5a481bec8b"
              summary: "example 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:
            slot-id:
              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:
            double-tile-slot-type:
              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:
            banner-heading-text:
              value: "Juicy apples!"
              summary: "banner heading text"
          required: true
          schema:
            type: string
            maxLength: 254
        - name: "bannerText"
          in: query
          description: |
            Banner text to insert into the banner rendering. `<strong>`, `<i>` and `<sup>` tags are supported.
          required: true
          examples:
            banner-text:
              value: "Citrus banner text"
              summary: "banner text"
          schema:
            type: string
            maxLength: 110
        - name: "bannerTextColour"
          in: query
          description: Banner text colour in RGB HEX format.
          examples:
            banner-text-color:
              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:
            cta-enabled:
              value: true
              summary: "banner CTA enabled flag"
          required: false
          schema:
            type: boolean
        - name: "ctaLink"
          in: query
          description: |
            Link for Call-To-Action element. Note: this may be a relative or absolute URL
            depending on the configuration.
          examples:
            cta-link:
              value: "https://www.retailer.com/promo/6ru0GM5"
              summary: "banner CTA link"
          required: false
          schema:
            type: string
            maxLength: 100
        - name: "backgroundColour"
          in: query
          description: Background colour of the rendered banner in RGB HEX format.
          examples:
            banner-background-color:
              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:
            background-image-url:
              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:
            background-image-position:
              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:
            primary-hero-image-url:
              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:
            hero-image-alt-text:
              value: "New flavour chips"
              summary: "hero image alt text"
          required: false
          schema:
            type: string
        - name: "secondaryHeroImage"
          in: query
          description: Secondary hero image URL.
          examples:
            secondary-hero-image-url:
              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:
            secondary-hero-image-alt-text:
              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:
            secondary-hero-image-mode-block:
              value: "BLOCK"
              summary: "secondary hero image mode"
          required: false
          schema:
            type: string
            enum:
              - UNDEFINED
              - BLOCK
              - LANDSCAPE
        - name: "additionalFields"
          in: query
          description: |
            Encoded list of key value pairs for additional data.  Supported field types are:
            - label: string value
            - color: A hex color value (e.g. `#0a0a0a`)
            - select: an enumerate list of strings

            The fields are encoded using the following format:
            `<key1>~<value1>_<key2>~<value2>`

            Where:
            - `~`: key and value separator
            - `_`: key/value pair separator

            The following characters are treated as reserved, and if they appear within either
            the key or value they will be encoded using the value: `!<hex-code>`

            <table>
              <thead><td>Character</td><td>Encoded Value</td></thead>
              <tr><td>-</td><td>!2D</td></tr>
              <tr><td>.</td><td>!2E</td></tr>
              <tr><td>_</td><td>!5F</td></tr>
              <tr><td>~</td><td>!7E</td></tr>
            </table>

            The remainder special characters will be URL encoded.

            For example. If we have the following field structure:
            <table>
              <thead><td>Key</td><td>Value</td></thead>
              <tr><td>field-one</td><td>Has special chars: ".~_-"</td></tr>
              <tr><td>field_two</td><td>#ffffff</td></tr>
            </table>

            This would be encoded in the `additionalFields` query parameter as:
            `field!2Done~Has%20special%20chars%20%3A%20%22!2E!7E!5F!2D%22_field!5Ftwo~%23ffffff`
          schema:
            type: string
          examples:
            simple:
              value: key1~value1_key2~value2
              summary: Simple key value pairs with no encoding
            complex:
              value: "field!2Done~Has%20special%20chars%20%3A%20%22!2E!7E!5F!2D%22_field!5Ftwo~%23ffffff"
              summary: Complex key value pairs with URL encoding and embedded reserved character escapes
        - 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:
            gtin-list:
              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 จะทำด้วยชุดของพารามิเตอร์ที่กำหนดไว้ที่แสดงบนโปรแกรมแสดงตัวอย่างของคุณ จากนั้นจึงสร้าง 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&gtins=7459770&gtins=59398&gtins=7895365

ช่องเพิ่มเติม

มาตรฐานเนื้อหารองรับ additionalFields เป็นชุดคู่ค่าคีย์ ข้อมูลนี้ได้รับการเข้ารหัสด้วยวิธีที่กำหนดเองในสตริงการสืบค้นสำหรับโปรแกรมแสดงตัวอย่าง ชนิดฟิลด์ที่รองรับ ได้แก่

  • ป้ายกํากับ: ค่าสตริง
  • สี: ค่าสีฐานสิบหก (เช่น #0a0a0a)
  • เลือก: รายการแจกแจงของสตริง

ฟิลด์ได้รับการเข้ารหัสโดยใช้รูปแบบต่อไปนี้: <key1>~<value1>_<key2>~<value2>
ที่ไหน:

  • ~: ตัวคั่นคีย์และค่า
  • _: ตัวคั่นคู่คีย์/ค่า

อักขระต่อไปนี้ถือเป็นอักขระสงวน และหากปรากฏอยู่ในคีย์หรือค่า อักขระเหล่านั้นจะถูกเข้ารหัสโดยใช้ค่า: !<hex-code>
อักขระ

อักขระค่าเข้ารหัส
-!2D
.!2E
_!5F
~!7E

อักขระพิเศษที่เหลือจะถูกเข้ารหัส URL

ตัวอย่างเช่น หากเรามีโครงสร้างฟิลด์ดังต่อไปนี้:

คีย์ค่า
field-oneมีอักขระพิเศษ: ".~_-"
field_two# ffffff

สิ่งนี้จะถูกเข้ารหัสใน additionalFields พารามิเตอร์แบบสอบถามเป็น: additionalFields=field!2Done~Has%20special%20chars%20%3A%20%22!2E!7E!5F!2D%22_field!5Ftwo~%23ffffff