Skip to main content

Media Placement

Media Placement (Video Ads)​

Media placements display premium video advertisements with full playback controls.

Basic Implementation​

import React from 'react';
import { View } from 'react-native';
import { TeadsAdPlacementMedia } from 'teads-react-native';

const VideoAdScreen = () => {
  return (
    <View>
      <TeadsAdPlacementMedia
        pid="84242"
        url="https://example.com/article/123"
      />
    </View>
  );
};

export default VideoAdScreen;

With Event Handlers​

import React from 'react';
import { View } from 'react-native';
import {
  TeadsAdPlacementMedia,
  type TeadsAdPlacementHandler,
} from 'teads-react-native';

const VideoAdScreen = () => {
  const handler: TeadsAdPlacementHandler = {
    onHeightChange: (newHeight) => {
      console.log('Media placement height changed:', newHeight);
      // The component automatically adjusts its height
    },
    onRecClick: (url) => {
      console.log('Ad clicked:', url);
      // SDK automatically opens the URL — use this only for tracking
    },
    onOrganicClick: (url) => {
      // Media placements typically don't emit organic clicks
      console.log('Organic click (unexpected for Media):', url);
    },
    onWidgetEvent: (eventName, data) => {
      console.log('Media event:', eventName, data);
    },
  };

  return (
    <View>
      <TeadsAdPlacementMedia
        pid="84242"
        url="https://example.com/article/123"
        handler={handler}
      />
    </View>
  );
};