Saltar al contenido

Cómo agregar los anuncios de Google a Gatsby y Reaccionar appsAug, 1stIn este tutorial, vamos a aprender acerca de cómo agregar Google …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo agregar Google Adsense código de anuncios a sus aplicaciones andreact.js Gatsby.

para la comprensión de los propósitos, este tutorial se divide en 4 etapas.

Paso 1: Conseguir su código de anuncios Adsense

abierto su cuenta de Google Adsense y generar el código de anuncio, el código podría ser similar, como a continuación código.


Paso 2: Agregar etiqueta de script a un archivo HTML

Para Reaccionar sitios

Abra su index.html y añadir la etiqueta de secuencia de comandos como en el siguiente código.





React App<itle><br /> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </script><br /> </head></p> <p><body></p> <div id="root"></div> <p></body><br /> </html></code> </p> <p> <strong> Para Gatsby sitios </strong> </p> <p> abrir su archivo html.js que está presente dentro de la carpeta src. </p> <p> Nota: Si usted no encuentra html.js archivo a continuación, ejecutar este comando cp .cache / default-html.js src / html.jsin su terminal para obtener html.js archivo. </p> <p> Ahora tiene que actualizar su html.js archivo con las líneas resaltadas a continuación. </p> <p> <code>import React from 'react'<br /> import PropTypes from 'prop-types'</p> <p>export default class HTML extends React.Component {<br /> render() {<br /> const ads = process.env.NODE_ENV === 'production' && <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" /> ;<br /> return (<br /> <html {...this.props.htmlAttributes}><br /> <head><br /> <meta charSet="utf-8" /><br /> <meta httpEquiv="x-ua-compatible" content="ie=edge" /><br /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><br /> <meta name="theme-color" content="#fff" /><br /> {ads && ads} {this.props.headComponents}<br /> </head><br /> <body {...this.props.bodyAttributes}><br /> {this.props.preBodyComponents}</p> <div key={`body`} id="___gatsby" dangerouslySetInnerHTML={{ __html: this.props.body }} /><br /> {this.props.postBodyComponents}<br /> </body><br /> </html><br /> )<br /> }<br /> }</code> </p> <h2> Paso 3: Creación de Adsense componente </h2> <p> Ahora estamos creando un componente GoogleAds que nos ayuda a utilizar los anuncios en diferentes lugares. </p> <p> crear un nuevo archivo llamado GoogleAds.js en sus componentes carpeta y añadir el siguiente código. </p> <p> <code>import React, { Component } from 'react';</p> <p>class GoogleAds extends Component {</p> <p> componentDidMount() {<br /> (window.adsbygoogle = window.adsbygoogle || []).push({}); }</p> <p> render() {<br /> return (<br /> <ins className='adsbygoogle' style={{ display: 'block' }} data-ad-client= 'add-your-client-id' data-ad-slot={this.props.slot} data-ad-format= 'auto' data-full-width-responsive="true" > </ins><br /> );<br /> }<br /> }</p> <p>export default GoogleAds;</code> </p> <p> En el código anterior, hemos creado un componente GoogleAds con this.props.slot para que podamos pasar los diferentes identificadores de ranuras en el momento de la utilización de este componente. </p> <p> en los datos-AD-cliente agregar su ID de cliente. </p> <h2> Paso 4: Uso GoogleAds componente </h2> <p> Ahora usted puede utilizar esto en cualquier componente de su aplicación mediante la adición de un <strong> adsense </strong> id espacio que se generó en el paso 1 </p> <p> <code></p> <div className="ad-class"> {/* add your slot id */}<br /> <GoogleAds slot="2434444" /></div> <p></code> </p> <h2> consejos de bonificación </h2> <p> También puede crear un componente similar para AdSense anuncios fija. </p> <p> <code>import React, { Component } from 'react';</p> <p>class GoogleFixedads extends Component {</p> <p> componentDidMount() {<br /> (window.adsbygoogle = window.adsbygoogle || []).push({});<br /> }</p> <p> render() {<br /> return (<br /> <ins className="adsbygoogle" style={this.props.style} data-ad-client="add-your-client-id" > </ins> );<br /> }<br /> }</p> <p>export default GoogleFixedads;</code> </p> <h3> Uso GoogleFixedads componente </h3> <p> En el siguiente código que necesitan añadir su id de ranura y la altura, anchura. </p> <p> <code></p> <div className="fixed-ad"> <GoogleFixedads slot="234578578" style={{ display: 'inline-block', width: '300px', height: '250px' }} /> </div> <p></code></p> <div class="banner desktop"> <div class="center fluid"> </div> </div> <div class="banner mobile"> <div class="center fluid"> </div> </div> <footer class="entry-footer"> <section class="entry-related"> <h3>Entradas relacionadas</h3> <div class="flex flex-fluid"> <article id="post-2111" class="entry-item column-third"> <a href="https://openanalytics.es/modo-de-empleo-reaccionar-hooksdec-29thin-este-tutorial-vamos-a-aprender-acerca-de-como-utilizar-los-ganchos-en/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/usestate-hook-demo-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Modo de empleo Reaccionar hooksDec, 29thIn este tutorial, vamos a aprender acerca de cómo utilizar los ganchos en …</h4> </a> </article> <article id="post-2112" class="entry-item column-third"> <a href="https://openanalytics.es/una-guia-para-principiantes-a-la-interfaz-de-usuario-del-material-reaccionar-tutorialdec-4thin-este-tutorial-vamos-a-aprender-acerca-de-como-utilizar-el-material/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/create-react-app-install-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Una guía para principiantes a la interfaz de usuario del material Reaccionar tutorialDec, 4thIn este tutorial, vamos a aprender acerca de cómo utilizar el material …</h4> </a> </article> <article id="post-2115" class="entry-item column-third"> <a href="https://openanalytics.es/como-agregar-hojas-de-estilo-externas-a-reactdec-27thin-reaccionar-aplicaciones-que-no-necesitamos-anadir-etiquetas-de-vinculos-manualmente-al-html/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/react-external-style-sheet-example-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Cómo agregar hojas de estilo externas a reactDec, 27thIn reaccionar aplicaciones que no necesitamos añadir etiquetas de vínculos manualmente al HTML …</h4> </a> </article> <article id="post-2090" class="entry-item column-third"> <a href="https://openanalytics.es/componentes-de-orden-superior-especial-en-reaccionar-con-examplesdec-13thin-este-tutorial-vamos-a-aprender-acerca-de-lo-que-son-de-orden-superior/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/hoc-example-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">componentes de orden superior (Especial) en Reaccionar con examplesDec, 13thIn este tutorial, vamos a aprender acerca de lo que son de orden superior …</h4> </a> </article> <article id="post-2094" class="entry-item column-third"> <a href="https://openanalytics.es/reaccionar-modal-tutorial-utilizando-hookssep-19thin-este-tutorial-vamos-a-aprender-acerca-de-como-crear-un-referente-en/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/modal-open-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Reaccionar modal tutorial utilizando hooksSep, 19thIn este tutorial, vamos a aprender acerca de cómo crear un referente en …</h4> </a> </article> <article id="post-2096" class="entry-item column-third"> <a href="https://openanalytics.es/http-solicitudes-en-redux-utilizando-redux-thunkjan-11thin-este-tutorial-vamos-a-aprender-acerca-de-como-obtener-los-datos-de-la/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/http-requests-redux-150x150.gif" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Http solicitudes en Redux utilizando Redux-thunkJan, 11thIn este tutorial, vamos a aprender acerca de cómo obtener los datos de la …</h4> </a> </article> </div> </section> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3>Deja un comentario <small><a rel="nofollow" id="cancel-comment-reply-link" href="/como-agregar-los-anuncios-de-google-a-gatsby-y-reaccionar-appsaug-1stin-este-tutorial-vamos-a-aprender-acerca-de-como-agregar-google/#respond" style="display:none;">Cancelar respuesta</a></small></h3> <form action="https://openanalytics.es/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate> <p class="comment-notes"><span id="email-notes">Tu dirección de correo electrónico no será publicada.</span> Los campos obligatorios están marcados con <span class="required">*</span></p><textarea id="comment" name="comment" cols="45" rows="1" required></textarea><p class="comment-form-author"><label for="author">Nombre <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Correo electrónico <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /><label for="wp-comment-cookies-consent">Guardar mi nombre, correo electrónico y sitio web en este navegador para la próxima vez que haga un comentario.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="btn btn-primary" value="Publicar comentario" /> <input type='hidden' name='comment_post_ID' value='2030' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> </form> </div><!-- #respond --> </div> </footer> </div> </div> </main> <footer class="site-footer"> <div class="container"> <div class="credits row"> <p>SEO y Programación.</p> </div> </div> </footer> <!-- Site Overlay --> <div class="site-overlay"></div> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "Open Analytics", "alternateName": "SEO y Programación.", "url": "https://openanalytics.es" } </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article", "headline": "  En este tutorial, vamos a aprender acerca de cómo agregar Google Read more", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://openanalytics.es/como-agregar-los-anuncios-de-google-a-gatsby-y-reaccionar-appsaug-1stin-este-tutorial-vamos-a-aprender-acerca-de-como-agregar-google/" }, "datePublished": "2020-03-13", "dateModified": "2020-03-13", "author": { "@type": "Person", "name": "admin" }, "publisher": { "@type": "Organization", "name": "Open Analytics" } } </script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/navigation.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/social.min.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/main.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-includes/js/comment-reply.min.js?ver=5.2.5'></script> <script type='text/javascript' src='https://openanalytics.es/wp-includes/js/wp-embed.min.js?ver=5.2.5'></script> </body> </html>