Instalando su Programa de Referidos en Joomla

Si esta 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 Joomla. Si desea instalar un programa de referidos en su sitio Web de Joomla, por favor continue leyendo. 

Your Joomla website homepage where we will install a referral program


Requerimientos de Joomla para esta guía de integración

Por razones de seguridad, cuando usted crea un artículo, Joomla no permite colocar etiquetas en el contenido de los mismos. Así que cada script, correo electrónico, applets e iframe será eliminado. Para evitar esto, necesitamos hacer algunos cambios en las configuraciones de Joomla para este tutorial.

NOTA

Incluso cuando le mostraremos en este tutorial como integrar Genius Referrals con Joomla usando un Formulario de Registro y un Formulario de Contacto para capturar y procesar nuevos referidos, en la mayoría de los casos solo necesita solo una vía para procesar nuevos referidos. En dependencia de las necesidades de su negocio, usted deberá decidir si procesa los nuevos referidos usando el formulario de registro o el formulario de contacto.  

Estableciendo la Configuración Global para permitir JavasScript


Diríjase al área de la Configuración Global en el menú desplegable del Sistema. Haga clic en la Pestaña Text Filter. Para los Grupos de Usuarios que se va a agregar el contenido que puede ser que necesite <script> etiquetas, cambie (o verifique) la configuración a No Filtering. Por razones de seguridad, solo cambie el Grupo de Usuarios necesarios. Le recomendamos que solo realice los cambios para el grupo Super Users. Las imagenes a continuación muestran el proceso.



Configuring Joomla for your refer a friend program


Configure Joomla to install the refer a friend program

Luego haga clic en el botón “Save & Close”.


Habilitando JavaScript en TinyMCE

Hay otra configuración que tenemos que considerar para permitir JavaScript en sus artículos. Entre en el administrador de plugin en el menú desplegable de Extensiones. En el cuadro de búsqueda, escriba TinyMCE. Esto debería mostrar el plugin "Editor - TinyMCE". Haga clic en el nombre del plugin para abrir la configuración del plugin.

Enabling javascript so that we can install the refer a friend program


Enabling Javascript so that we can install the referral program on Joomla


En la pestaña Plugin, busque en la parte inferior, está la lista de elementos prohibidos.




Allow scripts on Joomla for your refer a friend program


Enabling script on Joomla to install a refer a friend program


Elimine la palabra script (y la coma) de la lista en la caja de texto. Luego haga clic en el botón “Save & Close”.


Inhabilitando Content - Email Cloaking plugin


Si usted va a usar direcciones de correo electrónico en sus fragmentos de códigos de JavaScript, necesitara inhabilitar Content - Email Cloaking plugin. Así que, necesitaremos ir dentro del Administrador de Plugin dentro del menú desplegable Extensions. En el cuadro de búsqueda, escriba Email Cloaking. Esto debería mostrar el plugin “Content - Email Cloaking”.


Enabling plugins for your refer and earn

Luego haga clic en el botón “Disable” para inhabilitar el plugin como se muestra en la imagen.

Disabling contents so that we can install your referral program


Comenzando la integración de Joomla con Genius Referrals


Para cargar en su Joomla la plantilla y herramientas de Genius Referrals para el programa de referidos, necesitará agregar scripts en algunos de los artículos de su sitio o reescribir algunos contenidos de su plantilla de Joomla. Por ejemplo si quiere crear alguna referencia para uno de sus promotores cuando alguien lo contacte, necesitará agregar un script específico en su formulario de contacto. De la misma manera si alguien también se registrará en su sitio.


En la siguiente sección vamos a explicar en detalles 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 para obtener el código que debemos agregar a los artículos de Joomla.


Getting the code snippets for your referral program


Luego haga clic en el botón “Get me the code snippets”

Getting the script to install your refer and earn program on Joomla

La imagen a continuación nos muestra los fragmentos de código generado para cada uno de los diferentes escenarios que pudiera tener en su sitio de Joomla.



Genius Referral code snippets to install on Joomla for your referral program

Cargando la plantilla Full Widget en su página para el programa de referidos

Para cargar la plantilla de Genius Referrals crearemos un nuevo artículo y la llamaremos “Refer and Earn” y luego le agregaremos los script necesarios. A continuación se muestra el código generado por Genius Referrals.

Installing your referral template on your website

Debajo se muestra como se ve el código finalmente. Para pegar en el editor el código generado por Genius Referrals, necesita hacer clic en el botón “Toggle editor”.

Genius Referrals installed on your Joomla

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

Codes snippets needed to install a referral program on joomla

Fragmento de Código


<span class="gr_full_widget_design" id="gr-referral-program-home-page-252">&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": "referral-program-home-page-252",
        "grCustomerCurrencyCode": "USD",
        "grLanguage": "en"
    });
</script>

Una vez que el código está listo, necesitará hacer clic en el botón “Save & Close” y cargar el artículo “Refer and Earn”, entonces podrá ver su plantilla de Genius Referral.


Look how your refer a friend program is been loaded on your referral program

 

NOTA

Si al realizar las acciones anteriores no puede ver su plantilla de referido, revise en el artículo si el fragmento de código se ha guardado completo utilizando “Toggle editor”, en caso de no funcionar, puede intentarlo cambiando el editor. A continuación le explicamos los pasos que debe seguir.  

Cambiar editor

  • Diríjase al área de la Configuración Global en el menú desplegable del Sistema.
  • Haga clic en la Pestaña Site.
  • Busque la opción Default Editor y seleccione Editor-CodeMirror.

La imagen a continuación muestra el proceso.


Ahora intente cargar la plantilla Full Widget en su página para el programa de referido nuevamente.

Configurando el script de su página de aterrizaje

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

Code snippet needed to catch new referrals on your refer an earn program


Recuerde, para pegar el código generado por Genius Referrals, necesita hacer clic en el botón “Toggle editor”. La imagen debajo muestra el artículo.

Catching new referrals on your website with your refer and earn program


Fragmento de Código

<p>This is my landing page...</p>
<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 widget package en Genius Referrals uso una URL de aterrizaje específica para 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 Joomla. 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.


Choose the proper landing page for your refer a friend program

Picking up the perfect landing page for your refer and earn program

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 Joomla. Cuando alguien haga clic en la URL personal de algunos de sus promotores en las redes sociales, este 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.


Choosing the proper referral tools on your refer a friend program

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.

Checking the advocate data on your Joomla website


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 seria ver si el Sistema capturó al promotor en una cookie. Si abrimos la herramienta inspector de elementos del navegador y vemos la cookie todo estará bien.

Inspecting how the advocate data is store on your cookies


¡Excelente! Si ve la cookie que se muestra en la imagen, su página de aterrizaje está bien ¡Felicitaciones!


Configuración del script de la Página de Registro

Joomla tiene su propio flujo de registro. Eso es suficiente para que un usuario pueda registrarse en el sistema. Por defecto Joomla no tiene esa funcionalidad habilitada. Para activar esta funcionalidad diríjase al área de Configuración Global en el menú desplegable System. Seleccione la etiqueta Component dentro del menú User Manager, luego active el campo “Allow User Registration” haciendo clic en el botón “Yes”. Finalmente haga clic en el botón “Save & Close”. Puede chequear el proceso en la imagen que se muestra debajo.

Global configuration for installing your refer and earn program


Reescribiendo la Página de Registro en la plantilla de Joomla

Como le dijimos anteriormente, a veces en lugar de crear un artículo vamos a reescribir la plantilla de Joomla. En esta caso, vamos a modificar la página de registro para agregar el script de Genius Referrals. Diríjase al Template Manager dentro del menú desplegable Extensions. Entonces para editar la plantilla seleccione la plantilla que está usando en su sitio, para este ejemplo estamos usando la plantilla "Protostar". Mira la imagen debajo.

Rewriting Registration Page in the Joomla template


Una vez que estemos en el editor, seleccione la viñeta "Create Overrides". Entonces dentro de la columna "Components" seleccione la carpeta "com_users" y haga clic en el vínculo del fichero “registration”.

Setting up configurations in Joomla for your refer and earn program


Ahora diríjase a la pestaña Editor en la misma página que se encuentra y navegue a la carpeta "registration" (html/com_users/registration) en la barra lateral del árbol de carpetas. Luego haga clic en el fichero "default.php" para editarlo. Vamos a agregar el fragmento de código de Genius Referrals al final de la página.

Processing new referrals in your refer and earn program

Fragmento de Código

<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">jQuery( document ).ready(function( $ ) {
       jQuery('#member-registration').submit(function( event ){
          grToolbox.processCustomer({
            "grTemplateSlug": "referral-program-home-page-252",
            "grCustomerFirstname": jQuery('#jform_name').val(),
            "grCustomerLastname": jQuery('#jform_name').val(),
            "grCustomerEmail":  jQuery('#jform_email1').val(),
            "grCustomerCurrencyCode": "USD",
            "grCanRefer": false    });
             event.preventDefault();
         var form = this;
         setTimeout(function(){ form.submit(); }, 1500); });
});
</script>


Aquí está como se ve el código en la Página de Registro. El código subrayado son los tres parámetros que se pasan a la función processCustomer de Genius Referrals. Los valores son tomados de los campos del formulario de registro. Así cuando el formulario sea enviado las entradas (fjform_name and jform_email1) son tomadas desde el formulario y enviadas a Genius Referrals.

Realmente la función processCustomer define tres parámetros (name, last name and email) pero si el formulario no los tiene (name, last name and, usted incluso puede pasar el correo en cada caso.

NOTA

La función processCustomer define los parametros (name, last name and email) pero si estos parametros no se pueden capturar en el formulario de tegistro, usted puede pasar el email como el nombre y el apellido.

Así cuando un usuario se registre en su Sitio, se generará una referencia para el promotor capturado en su página de aterrizaje anteriormente. Vamos a ver el código fuente de la página “Register Page” para asegurarnos que los nombres de los campos son los mismos que le pasamos a la función.


Finding out what parameters to use on your referral program


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. 

Register form for catching new referrals on your referral program


Registration confirmation


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.

checking the amount of referral the advocate has generated


Configuración del script de la Página de Contacto


Joomla ya tiene una página de contacto. La única cosa que debe hacer es configurarla. Entonces, para este proceso necesitamos crear una Categoría, un Contacto que pertenezca a dicha categoría y un Formulario de Contacto. Una vez que tenga el formulario listo, vamos a agregar los fragmentos de código de Genius Referrals. Así cuando un usuario envíe un mensaje desde el formulario, el Sistema generará otra referencia para el promotor.

Usando el formulario de Contacto para capturar nuevos referidos

Como se ha explicado anteriormente, usted puede capturar nuevos referidos usando cualquier tipo formulario, y solo necesita un fomulario para capturar referidos. De acuerdo con las necesitades de su negocio usted debe decidir si usa el formulario de registro, el formulario de contacto o otro formulario para capturar nuevos referidos.  

Diríjase a Contacts en el menú desplegable Components y seleccione el submenu Categories.

Configuring the contact form for your referral program


Cree una nueva categoría y llámela “Managers”. Haga clic en el botón “Save & Close”.

Create a new category


Luego  vamos a crear un contacto nuevo. Así que diríjase a Contacts dentro del menú desplegable Components y entonces seleccione el submenu Contact.

Setting up a contact form


Cree un contacto y llámelo “Manager”. Haga clic en el botón “Select user” y vincule el contacto actual con un usuario de Joomla. Luego en el campo de la categoría seleccione la categoría “Managers”que creamos anteriormente. Finalmente llene los demás campos email, Address etc. Una vez que haya terminado haga clic en el botón “Save & Close”. Cheque la imagen debajo.

Creating a new manager in Joomla


Ahora ya estamos listos para crear el Formulario de Contacto. Así que la próxima cosa que nos resta por hacer es crear un elemento en el Main menu. Así que diríjase a Main Menu dentro del menú desplegable Menu y seleccione el submenu Add New Menu Item.

Creating a new contact form


Cree un nuevo elemento de menú y llámele “Contact Us”. En el botón “Select” del campo “Menu Item Type” seleccione Single Contact en la ventana modal que muestra las categorías de Contacto. En el botón “Select” del campo “Select Contact” seleccione el contacto “Manager” que ya creamos anteriormente. Luego haga clic en el botón “Save & Close”.

Create new contact form for your referral program


Reescribiendo “Contact Us” de la plantilla Joomla

Hasta aquí ya tenemos el Formulario de Contacto, pero nos queda agregar el script de Genius Referrals. Así que vamos a reescribir el formulario como hicimos con el Formulario de Registro. Para hacer esto, vamos a dirigirnos de nuevo a Template Manager dentro del menú desplegable Extension. Para editar la plantilla seleccione la que está usando en su sitio, recuerde que para este ejemplo estamos usando "Protostar".

Una vez en el editor, seleccione la viñeta "Create Overrides". Entonces, seleccione el fichero contact dentro de la carpeta "com_contact" bajo la columna "Components".


Ahora diríjase a la viñeta Editor en la misma página que se encuentra y navegue a la carpeta "registration" (html/com_users/registration) en la barra lateral del árbol de carpetas. Luego haga clic en el fichero "default.php" para editarlo. Vamos a agregar el fragmento de código de Genius Referrals al final de la página.

Processing new new customer in your refer a friend program


Fragmento de Código

<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">jQuery( document ).ready(function( $ ) {
       jQuery('#contact-form').submit(function( event ){
         grToolbox.processCustomer({
            "grTemplateSlug": "referral-program-home-page-252",
            "grCustomerFirstname": jQuery('#jform_contact_name').val(),
            "grCustomerLastname": jQuery('#jform_contact_name').val(),
            "grCustomerEmail":  jQuery('#jform_contact_email').val(),
            "grCustomerCurrencyCode": "USD",
            "grCanRefer": false    });
             event.preventDefault();
         var form = this;
         setTimeout(function(){ form.submit(); }, 1500); });
});
</script>

Así es como se ve el código de la página “Contact Us”. Al igual que el Formulario de Registro vamos a tomar los campos del Formulario de contacto para pasárselos como parámetros a la función processCustomer Genius Referrals. Una vez que el formulario es enviado, las entradas (jform_contact_name and jform_contact_email) son tomadas del formulario y enviadas a Genius Referrals. Entonces cuando un mensaje ha sido enviado, una referencia será generada para el promotor capturado en su “Landing Page” anteriormente. Vamos a echarle un vistazo al código fuente de Contact Us para asegurarnos que los ids de los campos son los mismos pasados a la función processCustomer.


Fishing the referral data from the form on your refer a friend program

Como puede ver, utilizamos los ids de los campos del formulario para tomar los valores de estos y entonces pasarlos a la función processCustomer. Debajo se muestra el Formulario de Contacto..

capturing new referrals in your contact form on your refer a friend program

capturing new referrals on your refer and earn program


Si el código está correcto cuando un usuario envié un mensaje, otra referencia se generará para el promotor capturado en el Sistema anteriormente. Así que vamos a ir a la página “Refer and Earn” de nuevo para ver las estadísticas. Debajo se muestra la nueva referencia de la que estamos hablando..

Checking the amount of referrals the advocates has generated for your 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