> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Create an attention span event

export const ScopesList = ({scopes = [], description = "この API には、次のいずれかのスコープが必要です。"}) => {
  if (!scopes || scopes.length === 0) {
    return null;
  }
  const sortedScopes = scopes.sort((a, b) => a.localeCompare(b));
  return <div>
      <div className="text-sm mb-2">{description}</div>
      <div>
        {sortedScopes.map((scope, index) => <div key={index}>
            <code>
              <span className="text-xs">{scope}</span>
            </code>
          </div>)}
      </div>
    </div>;
};

export const SupportedProducts = ({marketing, sales, service, cms, marketingLevel, salesLevel, serviceLevel, cmsLevel}) => {
  const translations = {
    header: "サポートされる製品",
    description: "次のいずれかの製品またはそれ以上が必要です。",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub"
    },
    tiers: {
      free: "無料ツール",
      starter: "Starter",
      professional: "Professional",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<AccordionGroup>
  <Accordion title="Supported products" defaultOpen="true" icon="cubes">
    <SupportedProducts marketing={true} marketingLevel="FREE" sales={true} salesLevel="FREE" service={true} serviceLevel="FREE" cms={true} cmsLevel="FREE" data={true} dataLevel="FREE" />
  </Accordion>

  <Accordion title="Required Scopes" icon="key">
    <ScopesList
      scopes={[
  'media_bridge.write'
]}
    />
  </Accordion>
</AccordionGroup>


## OpenAPI

````yaml specs/cms-media-bridge-v1.json POST /media-bridge/v1/events/attention-span
openapi: 3.0.1
info:
  title: CMS Media Bridge
  description: Basepom for all HubSpot Projects
  version: v1
  x-hubspot-product-tier-requirements:
    marketing: FREE
    sales: FREE
    service: FREE
    cms: FREE
    commerce: FREE
    crmHub: FREE
    dataHub: FREE
  x-hubspot-related-documentation:
    - name: Media Bridge Guide
      url: https://developers.hubspot.com/docs/guides/api/cms/media-bridge
servers:
  - url: https://api.hubapi.com
security: []
tags:
  - name: Advanced
  - name: Basic
  - name: Batch
paths:
  /media-bridge/v1/events/attention-span:
    post:
      tags:
        - Advanced
      summary: Create an attention span event
      description: >-
        Create an event containing the viewers attention span details for the
        media.
      operationId: post-/media-bridge/v1/events/attention-span
      parameters: []
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/AttentionSpanEventRequest'
        required: true
      responses:
        '200':
          description: successful operation
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/AttentionSpanEvent'
        default:
          $ref: '#/components/responses/Error'
          description: ''
      security:
        - oauth2:
            - media_bridge.write
components:
  schemas:
    AttentionSpanEventRequest:
      required:
        - mediaType
        - occurredTimestamp
        - rawDataMap
        - sessionId
      type: object
      properties:
        _hsenc:
          type: string
        contactId:
          type: integer
          format: int64
        contactUtk:
          type: string
        derivedValues:
          $ref: '#/components/schemas/AttentionSpanCalculatedValues'
        externalId:
          type: string
        externalPlayContext:
          type: string
          enum:
            - EMAIL
            - EXTERNAL_PAGE
        mediaBridgeId:
          type: integer
          format: int64
        mediaName:
          type: string
        mediaType:
          type: string
          enum:
            - AUDIO
            - DOCUMENT
            - IMAGE
            - OTHER
            - VIDEO
        mediaUrl:
          type: string
        occurredTimestamp:
          type: integer
          format: int64
        pageId:
          type: integer
          format: int64
        pageName:
          type: string
        pageUrl:
          type: string
        rawDataMap:
          type: object
          additionalProperties:
            type: integer
            format: int32
        rawDataString:
          type: string
        sessionId:
          type: string
    AttentionSpanEvent:
      required:
        - contactId
        - mediaBridgeId
        - mediaBridgeObjectCoordinates
        - mediaBridgeObjectTypeId
        - mediaName
        - mediaType
        - occurredTimestamp
        - percentRange
        - portalId
        - providerId
        - sessionId
        - totalPercentPlayed
      type: object
      properties:
        contactId:
          type: integer
          description: >-
            The ID of the contact in HubSpot’s system that consumed the media.
            This can be fetched using HubSpot's Get contact by usertoken (utk)
            API. The API also supports supplying a usertoken, and will handle
            converting this into a contact ID automatically.
          format: int64
        externalPlayContext:
          type: string
          enum:
            - EMAIL
            - EXTERNAL_PAGE
        mediaBridgeId:
          type: integer
          format: int64
        mediaBridgeObjectCoordinates:
          type: string
        mediaBridgeObjectTypeId:
          type: string
        mediaName:
          type: string
        mediaType:
          type: string
          enum:
            - AUDIO
            - DOCUMENT
            - IMAGE
            - OTHER
            - VIDEO
        mediaUrl:
          type: string
        occurredTimestamp:
          type: integer
          description: >-
            The timestamp at which this event occurred, in milliseconds since
            the epoch.
          format: int64
        pageId:
          type: integer
          description: >-
            The ID of the page, if hosted on HubSpot. Required for HubSpot
            pages.
          format: int64
        pageName:
          type: string
          description: The name of the page. Required if the page is not hosted on HubSpot.
        pageObjectCoordinates:
          type: string
        pageUrl:
          type: string
          description: >-
            The URL of the page that an event happened on. Required if the page
            is not hosted on HubSpot.
        percentRange:
          type: string
        portalId:
          type: integer
          description: The ID of the HubSpot account.
          format: int32
        providerId:
          type: integer
          format: int32
        rawData:
          type: string
          description: >-
            This is the raw data which provides the most granular data about
            spans of the media, and how many times each span was consumed by the
            user. For example, for a 10 second video where each second is a
            span, if a visitor watches the first 5 seconds of the video, then
            restarts the video and watches the first 2 seconds again, the
            resulting `rawDataString` would be
            `“0=2;1=2;2=1;3=1;4=1;5=0;6=0;7=0;8=0;9=0;”`.
        sessionId:
          type: string
        totalPercentPlayed:
          type: number
          description: >-
            The percent of the media that the user consumed. Providers may
            calculate this differently depending on how they consider repeated
            views of the same portion of media. For this reason, the API will
            not attempt to validate totalPercentWatched against the attention
            span information for the event. If it is missing, HubSpot will
            calculate this from the attention span map as follows: (number of
            spans with a value of 1 or more)/(Total number of spans).
        totalSecondsPlayed:
          type: integer
          description: >-
            The seconds that a user spent consuming the media. The media bridge
            calculates this as `totalPercentPlayed`*`mediaDuration`. If a
            provider would like this to be calculated differently, they can
            provide the pre-calculated value when they create the event.
          format: int32
    AttentionSpanCalculatedValues:
      required:
        - totalPercentPlayed
        - totalSecondsPlayed
      type: object
      properties:
        totalPercentPlayed:
          type: number
        totalSecondsPlayed:
          type: integer
          format: int32
    Error:
      required:
        - category
        - correlationId
        - message
      type: object
      properties:
        category:
          type: string
          description: The error category
        context:
          type: object
          additionalProperties:
            type: array
            items:
              type: string
          description: Context about the error condition
          example: >-
            {invalidPropertyName=[propertyValue], missingScopes=[scope1,
            scope2]}
        correlationId:
          type: string
          description: >-
            A unique identifier for the request. Include this value with any
            error reports or support tickets
          format: uuid
          example: aeb5f871-7f07-4993-9211-075dc63e7cbf
        errors:
          type: array
          description: further information about the error
          items:
            $ref: '#/components/schemas/ErrorDetail'
        links:
          type: object
          additionalProperties:
            type: string
          description: >-
            A map of link names to associated URIs containing documentation
            about the error or recommended remediation steps
        message:
          type: string
          description: >-
            A human readable message describing the error along with remediation
            steps where appropriate
          example: An error occurred
        subCategory:
          type: string
          description: >-
            A specific category that contains more specific detail about the
            error
      example:
        message: Invalid input (details will vary based on the error)
        correlationId: aeb5f871-7f07-4993-9211-075dc63e7cbf
        category: VALIDATION_ERROR
        links:
          knowledge-base: https://www.hubspot.com/products/service/knowledge-base
    ErrorDetail:
      required:
        - message
      type: object
      properties:
        code:
          type: string
          description: The status code associated with the error detail
        context:
          type: object
          additionalProperties:
            type: array
            items:
              type: string
          description: Context about the error condition
          example: '{missingScopes=[scope1, scope2]}'
        in:
          type: string
          description: The name of the field or parameter in which the error was found.
        message:
          type: string
          description: >-
            A human readable message describing the error along with remediation
            steps where appropriate
        subCategory:
          type: string
          description: >-
            A specific category that contains more specific detail about the
            error
  responses:
    Error:
      description: An error occurred.
      content:
        '*/*':
          schema:
            $ref: '#/components/schemas/Error'
  securitySchemes:
    oauth2:
      type: oauth2
      flows:
        authorizationCode:
          authorizationUrl: https://app.hubspot.com/oauth/authorize
          tokenUrl: https://api.hubapi.com/oauth/v1/token
          scopes:
            developers-read: ''
            developers-write: ''
            media_bridge.write: ''

````