Conexiones con las Landing Pages

Vamos a explicar como hemos enlazado las landing pages con Facebook, ya que decidimos utilizar como página web de empresa la propia página de Facebook con el perfil del restaurante (www.facebook.com/LaJamoneria) al disponer en la misma de un formulario de reserva y también de enlazar la página del restaurante en Facebook con el formulario de contacto de la página oficial del restaurante (http://www.elcortadordejamon.com/el-cortador-de-jamon/contacto).

Para ello hemos utilizado la aplicación iFrames App de Facebook que sustituye a la aplicación FBML ofreciendo mayores posibilidades. La aplicación iFrames nos permite insertar pestañas iFrames en nuestras páginas de Facebook,  es decir utilizar Facebook como página no como perfil particular.

Antes de empezar con el proceso una aclaracion de conceptos: 

Un iFrame es como un marco o ventana dentro de una página web que permite cargar en su interior otra página completa. El objetivo de esta herramienta es que nos va a permitir tener pestañas  para cargar directamente una página web en su interior, permitiendo tener contenido flash, javascript, php, css…  incluso si queremos hasta el código de seguimiento de Google Analytics.

Esto es una mejora muy notable porque antes con el formato FBML (como si fuera HTML pero con algunas etiquetas propias de Facebook)  no podían contener estos lenguajes.

Otra cosa importante que hay que tener en cuenta es el tamaño. El ancho máximo de nuestra aplicación es de 520 px, de esta forma se muestra correctamente sin barras de desplazamiento.

Una vez aclarado todo, veamos el proceso que hemos seguido para crear nuestras pestañas con iFrames:

1º. Creación de una aplicación de Facebook

Para  poder crear una pestaña con iFrames debemos crear primero una aplicación en Facebook. Para ello debemos dirigirnos a la siguiente dirección http://facebook.com/developers o si estamos logueados en Facebook escribiendo en el buscador: “desarrolladores” o “developers”. Nos aparece lo siguiente:

Hacemos clic en el botón “Crear una nueva aplicación” y ponemos el nombre con el que queremos llamar a nuestra aplicación. Aceptamos y confirmamos todo y ya tenemos creada nuestra aplicación.

2º. Configuración de nuestra aplicación

En este segundo paso vamos a tener que configurar nuestra aplicación para indicarle qué pagina web queremos que se cargue dentro de nuestra página de Facebook.

Como podemos observar hay seis opciones, de las seis opciones empezamos con:

Opción “Acerca de”:

De esta opción hay dos apartados que nos puede interesar en el aspecto de diseño, insertar un icono e insertar un logotipo. La imagen de icono es muy interesante porque cuando añadamos la pestaña en nuestra página aparece este icono en miniatura. Y en cuanto a insertar un logotipo, esto también es interesante porque nuestra aplicación será identificada por esa imagen y cuando la añadamos en nuestra lista de aplicaciones aparecerá esa imagen.

Opción “Sitio Web”

En esta opción solo debemos rellenar el campo “Site URL” , especificando la dirección de nuestra página que queremos cargar en nuestra pestaña.

Opción “Integración con Facebook”

En el apartado “Canvas” el campo  “Canvas Page o Página deTrabajo” es la url de nuestra aplicación en Facebook. En este campo especificamos un nombre, teniendo en cuenta que el máximo de caracteres permitidos es de 20 y sin mayúsculas.

En el apartado “Page Tabs” debemos especificar los siguientes campos:

• “Nombre de la pestaña” debemos indicar el que queremos que tenga la pestaña (aunque después en la propia página podemos cambiarlo, mostrando otro).

• “URL de pestaña” donde debemos escribir el archivo web que queremos incluir en la pestaña iFrame. En nuestro caso es index.html, pero puede ser perfectamente index.php (pero requiere otros archivos como facebook.php…). Ejemplo: http://www.dominio.com/carpeta/subcarpeta/index.html.

• “Secure Tab URL” si tuviéramos un dominio con seguridad escribiríamos aquí el mismo dominio anterior pero comenzando con el protocolo de seguridad “https://” , en mi caso no dispongo así que lo dejamos en blanco. Esto es importante porque aquellas personas que tengan activada en su cuenta de facebook la opción de “Navegación segura (https)” (Perfil de “Configuración de la cuenta” y “Seguridad de la cuenta”) al acceder a nuestra página no verán la pestaña de la aplicación iFrame. Ejemplo: https://www.dominio.com/carpeta/subcarpeta/index.html.

Con estas opciones ya tendríamos configurada la aplicación lista para funcionar, así que el resto de opciones no nos interesan para nuestro ejemplo.

3º. Añadir la aplicación creada a nuestra página de Facebook. 

Si entramos a “Perfil de la aplicación” nos aparece la pagina de nuestra aplicación.

Lo que nos interesa es ir “Añadir a Mi Página” (debajo de la imagen de perfil), hacemos clic y entonces nos aparece un listado de páginas donde podremos añadir la aplicación. Elegimos la página que nos interese y automáticamente se nos habrá añadido a la lista de aplicaciones de la página.

4º. Configuración de la aplicación y su visualización en la página.

Vamos a nuestra página de Facebook accedemos a “Editar información” y dentro de ella “Aplicaciones”. En ese listado de aplicaciones aparecerá nuestra aplicación con su correspondiente. Por último Si queremos podemos “Editar configuración” para agregar o eliminar la pestaña e incluso cambiar el nombre de pestaña como hemos mencionado anteriormente.

Por último, podemos ver el resultado de todo el proceso. En nuestro caso hemos tenido que crear dos aplicaciones para tener dos pestañas iFrames, porque tenemos dos landing pages: una orientada a una oferta de postre y la otra orientada al servicio de cortador de jamón, cada una de ellas tiene asociada una dirección URL distinta dentro de Facebook.

Una vez que terminamos con la creación de las aplicaciones de Facebook (los iframes), utilizamos el siguiente proceso de enlace entre anuncios de texto de Google AdWords, Facebook y página oficial de la empresa:

Tenemos dos tipos de anuncios de texto, en función del enlace de destino: oferta o servicio cortador, para las campañas de Google AdWords. Así por ejemplo, cuando un usuario haga clic en un anuncio de texto relacionado con "Oferta de postre Gratuito" o "Reserva de restaurante" va directamente a la pestaña del iFrame de la página de Facebook llamada "Oferta", donde se le muestra la imagen de la oferta con las características de la misma y una llamada a la acción (dicha imagen está alojada en otro dominio). Cuando el cliente hace clic en toda la imagen, le redirige automáticamente a un "formulario de reserva" que está alojado en la misma página de  Facebook como una aplicación iFrame (pestaña reserva), donde el cliente potencial podrá reservar la mesa y aprovecharse de la oferta del postre gratuito personalizado. Para el caso de que se haga clic en el otro anuncio de texto relacionado con el "Servicio de cortador de jamón" va directamente a la pestaña iFrame de la página de Facebook llamada "Cortador de Jamón", donde se muestra la imagen del cortador de jamón ofreciendo sus servicios. Si se vuelve a hacer clic en la misma imagen le redirige automáticamente de Facebook a la página oficial de la empresa (http://www.elcortadordejamon.com/el-cortador-de-jamon/contacto) y en concreto al formulario de contacto de la misma. El proceso se puede ver mejor con el siguiente gráfico.

En cuanto a las conexiones con Google Analytics

Colocamos los códigos de seguimiento en todas las páginas del sitio Web del Restaurante La Jamoneria (www.elcortadordejamon.com).

También colocamos los códigos de seguimiento en las dos Landing Pages que están alojadas en otro servidor (zobyhost.com). Además, creamos para las dos Landing Pages un “Seguimiento de Evento” con el cual nos permite hacer un seguimiento de las personas que hacen clic en los anuncios que aparecen en Facebook a través de las pestañas iFrames.

Ejemplo de seguimiento de evento (color rojo):

<script type="text/javascript">

function recordOutboundLink(link, category, action) {

  try {

    var pageTracker=_gat._getTracker("ID de analytics");

    pageTracker._trackEvent(category, action);

    setTimeout('document.location = "' + link.href + '"', 100)

  }catch(err){}

}

</script>

<title>Publicidad Servicio como Cortador de Jamón</title>

</head>

<body>

//Código de seguimiento de Google Analytics

<script type="text/javascript">

  var _gaq = _gaq || [];

  _gaq.push(['_setAccount', 'ID de seguimiento']);

  _gaq.push(['_trackPageview']);

  (function() {

    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

  })();

</script>

//Fin del codigo de seguimiento de Google Analytics

<a href="http://www.elcortadordejamon.com/el-cortador-de-jamon/contacto"    

onClick="recordOutboundLink(this, 'Servicio Cortador Jamon', 'FormularioContacto');

window.open(this.href,'_parent','params');return false;"><img src="LandingElCortador.png"  

alt="Servicio Cortador de Jamón" width="500" height="600" /></a>

</body>