Instalando su Programa de Referidos en WordPress

Si está en esta sección, estamos asumiendo que ya ha personalizado una plantilla para su programa de referidos en nuestro Centro de Diseño. Si aún no ha hecho esto, por favor valla a nuestro Centro de Diseño y  personalice su plantilla para el programa de referidos antes de continuar leyendo este guía. 


¿Quién debe leer esta guía?

Esta guía es para clientes con un sitio Web de WordPress. Si desea instalar un programa de referidos en su sitio Web de WordPress, por favor continue leyendo. 

Your wordpress website homepage where we will install a referral program


Plugins de WordPress requeridos en esta guía

Los siguientes plugins son requeridos en esta guía. Le mostraremos como integrar Genius Referrals con WordPress usando un formulario de registro y un formulario de contacto como las vías pricipales de capturar nuevos referidos (clientes potenciales). De acuedo con de sus necesidades usted tiene que decidir cuál plugin usar para capturar nuevos referidos. 

  • Contact Form 7
  • Profile Builder

La versión de WordPress

En este tutorial estamos usando la version 4.9.4 de WordPre

Plugins de WordPress requeridos

Incluso cuando mostraremos como integrar Genius Referrals con WordPress usando ambos plugins Contact Form 7 y Profile Builder, la mayoria de las veces usted solo necesita de un plugin. Usted también debe ser capaz de instalar su programa de referido en WordPress usando otros plugins similares. 

Diríjase al área Plugins en el menú principal.

required plugins to install the a referral program on Wordpress

Para installar los plugins (Contact Form 7 y Profile Builder) haga clic en el botón Add New que aparece en la imagen de arriba y luego busque los plugins teniendo en cuenta sus nombre, haga clic en el botón “Install Now”  de cada plugin que necesite.


Comenzando la integración de WordPress con Genius Referrals

Para instalar la plantilla de referidos de Genius Referrals y los demas códigos en su sitio Web de WordPress, necesita adicionar los fragmentos de códigos en algunas paginas de su sitio Web. Por ejemplo: para capturar nuevos referidos, necesita adicionar en el formulario de contacto un fragmento de código específico.

En la siguiente sección vamos a explicar en detalle algunos ejemplos para cada uno de los escenarios que usted pudiera tener en su sitio web. 

Para obtener cada uno de los script específicos le vamos a pedir a Genius Referrals que los genere para la integración. Para eso necesitamos ir a la sección del Centro de Diseño y seleccionar un plantilla específica de la lista.




getting the code snippets from the wordpress installation


Ahora haga clic en el botón “Muestre los fragmentos de código”.



code snippets for your wordpress instalation


La imagen de abajo muestra los fragmentos de código necesarios para integrarse con Genius Referrals.

List of code snippets to be installed on your wordpress for your referral program



Cargando la plantilla de tipo Full Widget en su página del programa de referidos

Para cargar la plantilla de Genius Referrals, creamos una nueva página en WordPress y la nombramos “Refer and Earn”. Luego adicionamos el fragmento de código necesario en la página. Abajo puede ver un ejemplo de como Genius Referrals genera el fragmento de código.



codes snippets needed to install your referral program on wordpress


Copie el código de Genius Referrals, haga clic en la pestaña Text en el editor de WordPress y péguelo. Debajo le mostramos como queda el código finalmente.


installing your refer and earn program on your WordPress with Genius Referrals code snippets



Aquí puede ver mejor un aumento del código.

details of the codes snippets to be place on your wordpress editor


Una vez que el código está listo, necesitará hacer clic en la pestaña Visual del editor de WordPress y luego volver a la pestaña Text y verá como WordPress finalmente formatea el código.


final code snippet on your wordpress referral program


Para finalizar el proceso haga clic en el botón “Update” para salvar y luego en el botón “View Page” y finalmente verá la plantilla de Genius Referrals cargada en su página  “Refer and Earn”. Debajo hay una imagen de la página que muestra el resultado final.

Fragmento de código

<span class="gr_full_widget_design" id="gr-my-wordpress-default-2">&nbsp;</span>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://template.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.1.3.min.js"></script>
<script type="text/javascript">
    grToolbox.loadTemplate({
        "grTemplateSlug": "my-wordpress-default-2",
        "grCustomerCurrencyCode": "USD",
        "grLanguage": "en"
    });
</script>


Look how beautiful looks your referral program template on your wordpress website


Configuración del script de “Landing Page” (página de aterrizaje)

Para la configuración de su página de aterrizaje crearemos una nueva página y le llamaremos “Landing Page”. Debajo está el script generado por Genius Referrals.

Getting the code snippet to place on the landing page of your referral program


Selecione la pestaña Text en editor de WordPress como se muestra en la imagen de abajo. 

Configuring the landing page for your referral program on wordpress


Finalmente haga clic en la pestaña Visual y luego haga clic nuevamente en la viñeta Text para ver como WordPress ha formateado el código o simplemente haga clic en el botón “Update” para guardar los cambios. Abajo mostramos una imagen con el codigo formateado.


Fragmento de código

This is my landing page...

<script type="text/javascript" src="https://template.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.1.3.min.js"></script>
<script type="text/javascript">
    grToolbox.catchReferrer();
</script>


Hay algo más que chequear en el “Landing Page”. Cuando usted configuró su campaña en Genius Referrals uso una URL específica para aterrizar cuando alguien haga clic en los vínculos compartidos de sus promotores, así que la URL de su página de aterrizaje en su campaña debe ser la misma que la URL del “Landing Page” de Wordpress. Vamos a echar un vistazo en la configuración de los paquetes de widget de Genius Referrals y vamos a chequear eso. Miremos la imagen debajo.



Checking the landing page for your referral program

 

checking the landing page for your referral program on your wordpress


Como puede ver las URL coinciden. En caso contrario, deberá editar su widget package en Genius Referrals y sustituir la que está por la URL de su Página de aterrizaje en WordPre.Cuando alguien haga clic en la URL personal de algunos de sus promotores en las redes sociales será redirigido a su página de aterrizaje, entonces el promotor será capturado por el sistema para una referencia futura. Para este ejemplo vamos a tomar la URL personal de uno de sus promotores, luego vamos a navegar para ver el resultado final.

Use the following referral tools to refer your friend on wordpress


Si tomamos la URL personal del promotor y la pegamos en el navegador Genius Referrals lo va a redirigir a la página de aterrizaje, entonces el promotor será capturado por el sistema en una cookie. Echemos un vistazo a todo el proceso.

matching the genius referral landing page with the wordpress landing page


Hasta ahora el flujo de la página de aterrizaje está funcionando. Como puede ver ha sido redirigido para dicha página. Así que el próximo chequeo sería ver si el Genius Referrals capturó al promotor en una cookie. Si abrimos la herramienta inspector de elementos del navegador (Google Chrome en este caso) y vemos la cookie todo estará bien.  

Tracking new referral on your refer a friend program with wordpress


Si ve las cookies creadas como se muetra en la imagen de arriba, esto indica que su página de aterrizaje esta lista. ¡Felicitaciones!



Configuración del fragmento de codigo de la pagina de Registro

WordPress tiene su propio flujo de registro. Eso es suficiente para que un usuario pueda registrarse en el sistema. Pero para hacer este tutorial más claro y fácil usaremos el plugin “Profile Builder”. El próximo paso a seguir será configurar las paginas “Login Page” and “Register Page” en WordPress. Así que lo primero que necesitamos es crear las paginas correspondientes y agregarles los script generados por Genius Referrals.


Creando la página de Autenticación

De nuevo vamos a ir a la sección de páginas de WordPress y crearemos una página llamada “Login Page”. Esta vez vamos a usar los tags del plugin “Profile Builder” para generar las fuentes de la página. Lo único que tenemos que hacer es agregar el snippet del plugin. Debajo hay una imagen que muestra el resultado final.

setting up a login page for the referral program


Haga clic en el botón “Update” para salvar los cambios y luego para ver la página generada clic en el botón “View Page”, entonces la página será mostrada. Echale un vistazo a la imagen debajo.

login page for wordpress referral program


Creando la página de Registro

De la misma forma que hizo con “Login Page”, creará “Register Page”, pero esta vez le agregaremos los script generados por Genius Referrals. Así cuando un usuario se haya registrado en el Sistema, se le asignará una referencia al promotor capturado en su página de aterrizaje anteriormente. La imagen muestra la página creada. 

creating a registration page for wordpress referral program


Aquí está como se ve el código en “Register Page”. El código subrayado son los tres parámetros pasados a la función processCustomer de Genius Referrals. Los valores son tomados de los campos del formulario de registro generado por el plugin Profile Builder. Así cuando el formulario sea enviado las entradas (first_name, last_name and email) son tomadas desde el formulario y enviadas a Genius Referrals. Vamos a ver el código de la página “Register Page” para asegurarnos que los nombres de los campos son los mismos que le pasamos a la función. Pero primero salvaremos la página para ver como WordPress formatea el código.

capturing new referral on your wordpress referral program


Así es como luce el código finalmente. Haga clic en el botón “Update” y luego en el botón  “View Page” para ver las transformaciones finales echas por WordPress en “Register Page”. También vamos a ver las fuentes del formulario.

Fragmentos de código

[wppb-register]

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://template.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.1.3.min.js"></script>
<script type="text/javascript">
    grToolbox.processCustomerAndBonus({
        "grTemplateSlug": "my-wordpress-default-2",
        "grCustomerFirstname": "CUSTOMER_FIRSTNAME",
        "grCustomerLastname": "CUSTOMER_LASTNAME",
        "grCustomerEmail": "CUSTOMER_EMAIL",
        "grCustomerCurrencyCode": "USD",
        "grCanRefer": false,
        "grReference" : "REFERENCE",  /** could be the order id, timestamp, etc. **/
        "grPaymentAmount" : "PAYMENT_AMOUNT" /** optional (float) **/
    });
</script>


Getting the fields from the form



Como puede ver tomamos los ids de los campos para obtener los valores de los mismos y pasarlos a la función processCustomer. Debajo hay una imagen del formulario de registro.

capturing new referrals on wordpress registration page

Luego que el formulario ha sido enviado un nuevo referido es generado en Genius Referrals. 

confirmation page for wordpress registration form


Así que si todo está bien cuando usted chequee la página de “Refer and Earn” debe haber una referencia asignada al promotor correspondiente capturado en la página de aterrizaje, debido a que un usuario se ha registrado en el Sistema. La imagen debajo muestra la referencia de la que estamos hablando.

Check your new referral generated on wordpress


Configuración de la página de contacto para capturar nuevas referencias

La página de contacto será generada por el plugin Contact Form 7. Básicamente haremos lo mismo que hicimos con la página de registro. Así que cuando un usuario envié un mensaje al equipo de ventas del Sistema, se generará otra referencia para el promotor. Vamos a crear la “Contact Page”. Debajo se muestra como debe ser el código de la página.

Usando el formulario de contacto para capturar nuevos referidos

Como ya se ha explicado anteriormente, usted puede capturar nuevas referencias usando cualquier tipo de formulario, y solo necesita un formulario para capturar nuevas referencias. De acuerdo con sus necesidades, usted debe decidir cuando usar el formulario de registro o el formulario de contacto o otro tipo de formulario para capturar nuevos referidos.  

contact page snippets for your refer and earn program on wordpress

Esta vez no podremos tomar los campos “first_name, last_name and email” del formulario de contacto y pasarlos a la función  precessCustomer. Esto se debe a que el formulario de contacto solo tiene los campos your_name y email. En este caso cuando no tiene acceso a todos los campos puede pasar incluso el email en cada uno de los demás campos. 
Haremos clic en los botones “Update” y “View Page” para ver como luce el formulario. También vamos a echar un vistazo a las fuentes del mismo.

Code Snippet

[contact-form-7 id="57" title="Contact form 1"]

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://template.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.1.3.min.js"></script>
<script type="text/javascript">
    grToolbox.processCustomerAndBonus({
        "grTemplateSlug": "my-wordpress-default-2",
        "grCustomerFirstname": "CUSTOMER_FIRSTNAME",
        "grCustomerLastname": "CUSTOMER_LASTNAME",
        "grCustomerEmail": "CUSTOMER_EMAIL",
        "grCustomerCurrencyCode": "USD",
        "grCanRefer": false,
        "grReference" : "REFERENCE",  /** could be the order id, timestamp, etc. **/
        "grPaymentAmount" : "PAYMENT_AMOUNT" /** optional (float) **/
    });
</script>


get field from contact form on your wordpress refer a friend program



complete the contact form to generate a new referral for your word referral program


referral generated on wordpress referral program


Si el codigo esta OK, cuando un cliente potencial envia un mensaje, una nueva referencia será generada para el promotor. Asi que revisemos la página "Refer and Earn" para ver las estadísticas.

New referral generated on your wordpress referral program

¡Excelente! Ahí tiene la segunda referencia generada por el envió del mensaje. Así que como puede ver la integración con Genius Referrals es fácil. Básicamente dondequiera que usted desee generar una referencia para un promotor lo único que tiene que hacer es llamar a la función processCustomer y la misma será creada.



Recurso Extensión Tamaño



Por favor, deje sus comentarios o preguntas debajo