Tutorial: Facebook Audience Network - Alternativa AdSense (móvil)

  • Autor Autor Cicklow
  • Fecha de inicio Fecha de inicio
Cicklow

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Facebook NO Acepta mas sitios webs, solo APPS Facebook-Audience-Network.webp
Facebook Audience Network permite monetizar sitios webs y aplicaciones mobiles (Android, iOS), en este sentido esta alternativa de AdSense es solo para trafico móvil!, no solo es una alternativa, sino tambien un complemento para agregar conjuntamente con AdSense...

De echo hay un tutorial sobre esto en:
http://forobeta.com/tutoriales/505458-fb-audience-network-tus-articulos-instantaneos-parte-1-a.html
http://forobeta.com/tutoriales/505464-fb-audience-network-tus-articulos-instantaneos-parte-2-a.html

Pero se usa artículos instantáneos, este tutorial sera como usar la publicidad de facebook en nuestros sitios webs...

Paso 1 - Crear Aplicación
Nos dirigimos a Log into Facebook | Facebook y creamos una apps que sea tipo "Sitio Web"
1-4ff3c8d.jpg


Asignamos un nombre
2-4ff3c91.jpg


Completamos los campos
3-4ff3c99.jpg


Asignamos nuestro sitio web
4-4ff3c9f.jpg



Paso 2 - Agregar AN (Audience Netword)
Vamos a Page Not Found - Facebook for Developers seleccionamos nuestra aplicación previamente creada y le damos a continuar:
5-4ff3ca5.jpg


Agregamos nuestro dominio (Nuevamente)
6-4ff3ca7.jpg


Creamos una ubicación del anuncio
7-4ff3ca9.jpg

* En el campo "Pasos para activar el anuncio" expliquen donde aparece el anuncio, ejemplo si van a colocar el anuncio en un post, coloquen "enter to post"...

Colocar código en nuestro sitio web
Cuando terminamos de crear el banner aparecerá un botón el cual dice "Obtener HTML", le damos click y seleccionamos el tamaño del banner (por ahora seleccionen un tamaño fijo, mas adelante en el tutorial veremos los anuncios "Nativos")
8-4ff3cad.jpg


Copiamos el código y lo pegamos en donde queramos mostrar el anuncio (solo aparecerá en versión móvil)...

A tener en cuenta, el sitio web y la ubicación de los anuncios tiene que ser habilitada por los admin de Facebook, esto puede ser en el momento o en unas horas...

Paso 3 - Configurar Pagos
AN paga por cuenta bancaria (sirve la cuenta de payoneer) o por paypal!, nos dirigimos al menu de la izquierda y veremos un link que dice pagos, le damos clic y accedemos a:
9-4ff3cb4.jpg

Ahora tendremos dos opciones o creamos una empresa nueva o si ya tenemos una la seleccionamos, si necesitamos crear una empresa nueva solo tendremos que completar los datos (TODOS, y como webmasters seriamos "Propietarios Único")...

Ahora toca completar el formulario W8BEN
10-4ff3cba.jpg

El cual completamos nuestros datos, si tienen una impresora imprimen el formulario, lo completan, lo escanean y lo convierten a PDF (Facebook solo acepta PDF)...
11-4ff3cc0.jpg

Si no tienen impresora, lo completan desde la PC (el Adobe permite esto) y guardan a JPG lo firman con el paint u otro editor y lo convierten a PDF de nuevo (Yo hice eso porque no tenia tinta en la impresora jajaja)

Ahora toca esperar que habiliten nuestro método de pago

Paso 4 - Anuncios Nativos
Este tipo de anuncios lo que hace es complementarse con el contenido de nuestro sitio web... ejemplo:
Native%2BAds%2Bfor%2BApps%2Bin%2BDoubleClick.jpg

Como ven en la imagen los anuncios son como el contenido, esto nos permite manejar como mostrar, diseño y mas...
Facebook AN nos da este código:
HTML:
    <style>
     #ad_root {
        display: none;
        font-size: 14px;
        height: 250px;
        line-height: 16px;
        position: relative;
        width: 300px;
      }
      .thirdPartyMediaClass {
        height: 157px;
        width: 300px;
      }
      .thirdPartyTitleClass {
        font-weight: 600;
        font-size: 16px;
        margin: 8px 0 4px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .thirdPartyBodyClass {
        display: -webkit-box;
        height: 32px;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .thirdPartyCallToActionClass {
        color: #326891;
        font-family: sans-serif;
        font-weight: 600;
        margin-top: 8px;
      }
    </style>
    <script>
      window.fbAsyncInit = function() {
        FB.Event.subscribe(
          'ad.loaded',
          function(placementId) {
            console.log('Audience Network ad loaded');
            document.getElementById('ad_root').style.display = 'block';
          }
        );
        FB.Event.subscribe(
          'ad.error',
          function(errorCode, errorMessage, placementId) {
            console.log('Audience Network error (' + errorCode + ') ' + errorMessage);
          }
        );
      };
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk/xfbml.ad.js#xfbml=1&version=v2.5&appId=929898177138341";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
    <div class="fb-ad" data-placementid="929898177138341_929902250471267" data-format="native" data-nativeadid="ad_root" data-testmode="false"></div>
    <div id="ad_root">
      <a class="fbAdLink">
        <div class="fbAdMedia thirdPartyMediaClass"></div>
        <div class="fbAdTitle thirdPartyTitleClass"></div>
        <div class="fbAdBody thirdPartyBodyClass"></div>
        <div class="fbAdCallToAction thirdPartyCallToActionClass"></div>
      </a>
    </div>
El cual mostrara:
screenshot_2016-0...23-53-06-4ff3ccb.png


Como ven asi sin nada se ve feo, es por eso que necesitaremos aplicarle estilos CSS para que sea igual a nuestro blog, ejemplo si mostramos un listado de post (imagen + parte del contenido), podemos hacer que las ads se vean como ese contenido (la imagen seria del ads y el texto la descripcion del ads...)

Paso 5 - Otras notas
Si usamos WP podremos alternar los ads (adsense en PC y AN en movil) usando (editando el theme):
PHP:
<?php
if(wp_is_mobile()){
echo 'Facebook';
}else{
echo 'AdSense';
}
?>

O usar plugin para este fin (mostrar ads)...

Saludos y suerte!

Si se copia el tutorial dejar un link hacia este foro y no se permite comerciar con el tutorial!
 
Última edición:
Es lo que andaba buscando! Muchas gracias! :encouragement:
 
Excelente tutorial
 
Última edición:
Excelente tutorial bien :encouragement:

- - - Actualizado - - -
[MENTION=9679]cicklow[/MENTION] Digamos que tengo un blog en blogger que recibe trafico movil desde una app , tambie puedo aprovechar ese trafico para usar fb audience en el blog y que se muestre claramente a los usuarios del app que estan visualizando el blog
 
Excelente tutorial bien :encouragement:

- - - Actualizado - - -
[MENTION=9679]cicklow[/MENTION] Digamos que tengo un blog en blogger que recibe trafico movil desde una app , tambie puedo aprovechar ese trafico para usar fb audience en el blog y que se muestre claramente a los usuarios del app que estan visualizando el blog

claro, sirve para cualquier sitio web (ten en cuenta que tiene que pasar por la habilitacion de facebook)...

- - - Actualizado - - -

Excelente tutorial, ¿cuanto pagan? 🙂

depende el trafico... pero con 1000 impresiones en un test que hice unos 0,40USD
 
claro, sirve para cualquier sitio web (ten en cuenta que tiene que pasar por la habilitacion de facebook)...

- - - Actualizado - - -



depende el trafico... pero con 1000 impresiones en un test que hice unos 0,40USD

y el mercado estado estadounidense :welcoming: que opinas.
 
y el mercado estado estadounidense :welcoming: que opinas.

yo lo estoy usando en un sitio en español y me rindio eso, 1000 impresiones unos 0.40USD... de seguro para paises altos los ingresos seran mayores!
 
jajajaj aquí esta el tutorial, excelente aporte y yo todo el día traveseando sin conocimiento lo logre! :drunk:
 
Gracias por el aporte. Voy hacer probar para ver cual rinde mejor
 
Vamo a probar :encouragement: Gracias por el Tuto cicklow 😛8: :greedy_dollars::greedy_dollars:
 
me aceptaron y todo peor no veo el banner en mi web
 
Enlace eliminado como siempre +10 excelente tuto
¿como se pasa del tamaño fijo a los nativos?
 
Última edición:
Enlace eliminado como siempre +10 excelente tuto
¿como se pasa del tamaño fijo a los nativos?

en el mismo lugar de donde obtenes el codigo seleccionas nativos... y te da el codigo!
 
[MENTION=9679]cicklow[/MENTION] gracias.
Ta he trabajado con el otro tutorial, el de [MENTION=2754]MAUROX9[/MENTION]
Ahora, en la tarde, trabajaré con este, estaré pendiente de preguntar o informar cualquier detalle.
Saludos 🙂
 
¡Gracias por este tutorial!
 
Atrás
Arriba