Skip to main content

Feed Placement

Feed Placement (Content Recommendations)​

Feed placements display content recommendation widgets designed for integration into content feeds.

Basic Implementation​

import React from 'react';
import { ScrollView, View } from 'react-native';
import { TeadsAdPlacementFeed } from 'teads-react-native';

const ArticleScreen = () => {
  return (
    <ScrollView>
      <View>
        {/* Your article content */}
        <Text>Article content here...</Text>
      </View>

      {/* Feed Placement */}
      <TeadsAdPlacementFeed
        widgetId="MB_1"
        widgetIndex={0}
        articleUrl="https://example.com/article/123"
        partnerKey="YOUR_PARTNER_KEY"
      />
    </ScrollView>
  );
};

export default ArticleScreen;

With Event Handlers​

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

const ArticleScreen = () => {
  const handler: TeadsAdPlacementHandler = {
    onHeightChange: (newHeight) => {
      console.log('Feed placement height changed:', newHeight);
      // Handle height changes if needed
    },
    onRecClick: (url) => {
      console.log('Recommendation clicked:', url);
      // SDK automatically opens the URL — use this only for tracking
    },
    onOrganicClick: (url) => {
      console.log('Organic content clicked:', url);
      // Handle organic content navigation
      // You may want to use your app's navigation here
    },
    onWidgetEvent: (eventName, data) => {
      console.log('Widget event:', eventName, data);
      // Handle other widget events
    },
  };

  return (
    <ScrollView>
      <TeadsAdPlacementFeed
        widgetId="MB_1"
        widgetIndex={0}
        articleUrl="https://example.com/article/123"
        partnerKey="YOUR_PARTNER_KEY"
        handler={handler}
      />
    </ScrollView>
  );
};
Do not open the URL manually

The SDK automatically handles opening the click URL in onRecClick. Do not implement URL navigation in this event handler — doing so will result in the browser opening twice. Use this event only for tracking/analytics purposes.

With Optional Attributes​

<TeadsAdPlacementFeed
  widgetId="MB_1"
  widgetIndex={0}
  articleUrl="https://example.com/article/123"
  partnerKey="YOUR_PARTNER_KEY"
  extId="custom-external-id"
  extSecondaryId="custom-secondary-id"
  userId="user-123"
  pubImpId="impression-456"
  darkMode={false}
  handler={handler}
/>

Multiple Widgets on Same Page​

When using multiple Feed Placements on the same page, assign sequential widgetIndex values starting from 0:

<ScrollView>
  {/* First widget */}
  <TeadsAdPlacementFeed
    widgetId="MB_1"
    widgetIndex={0}
    articleUrl="https://example.com/article/123"
    partnerKey="YOUR_PARTNER_KEY"
  />

  {/* Article content */}
  <Text>More content...</Text>

  {/* Second widget */}
  <TeadsAdPlacementFeed
    widgetId="MB_2"
    widgetIndex={1}
    articleUrl="https://example.com/article/123"
    partnerKey="YOUR_PARTNER_KEY"
  />
</ScrollView>
tip

Widget Index: The widgetIndex is a zero-based value that must be assigned sequentially to all widgets on the same page. This ensures each widget receives different recommendations.