Quiero crear un feed donde se muestre un anuncio de Google después de cada 10 publicaciones, como Instagram. Estoy usando Firebase como mi base de datos y Tailwind-CSS para el estilo. ¿Cómo usaría Google Ads para implementar esta función?
Aquí está mi código para mostrar un Feed
Feed.js
import {React, useState, useEffect} from "react"; import Navbar from "./Navbar"; import Post from "./Post"; import { onSnapshot, collection, query, orderBy } from "@firebase/firestore"; import { db } from "../firebase"; function Feed() { const [posts, setPosts] = useState([]); useEffect( () => onSnapshot( query(collection(db, "posts"), orderBy("timestamp", "desc")), (snapshot) => { setPosts(snapshot.docs); } ), [db] ); return ( <div> <Navbar /> <div className="pb-72"> {posts.map((post) => ( <Post key={post.id} id={post.id} post={post.data()} /> ))} </div> </div> ); } export default Feed;La función de map de javascript tiene un segundo parámetro, index , que le indica el índice del elemento en la matriz que está iterando. Así que le gustaría hacer dos cambios clave:
return ( <div> <Navbar /> <div className="pb-72"> {posts.map((post, idx) => { // If true, you're on the tenth post const isTenthPost = (idx + 1) % 10 === 0 // Note the addition of the React fragment brackets - your map call // has to return a single React component, so we add this to handle // the case where we want to return both the post and the Google ad. return ( <> <Post key={post.id} id={post.id} post={post.data()} /> { isTenthPost && <GoogleAdComponent /> } </> ) })} </div> </div> );No estoy sugiriendo que copie y pegue esto exactamente, pero debería ayudarlo a comprender cómo determinar si está en la enésima publicación y cómo mostrar condicionalmente otro componente.