Soluciones de Software de Referidos
Nuestra plataforma puede ayudar a cualquier industria a impulsar las ventas y niveles sin precedentes de reconocimiento de marca.
Plantillas del Programas de Referidos
Explore nuestras plantillas de programas de referidos que se pueden personalizar para que encajen a la perfección con su marca.
 
Si se encuentra en esta sección, asumimos en este momento que ya ha personalizado una plantilla de referido para su programa de referidos en nuestro Creador de Plantillas. Si aún no lo ha hecho, vaya a la Configuración del programa y personalice su plantilla de referido antes de continuar con este tutorial.

INSTALANDO SU PROGRAMA DE REFERIDO EN JOOMLA

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 continúe leyendo.

¿Quién debe leer esta guía?

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 cómo 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.
i

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 imágenes a continuación muestran el proceso.
A continuación, debe hacer clic en el botón "Salvar y Cerrar".

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.
En la pestaña Plugin, busque en la parte inferior, está la lista de elementos prohibidos.
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 de Integraciones- Code Snippets-Instalación.
Sección de Integración-Instalación a través de la cual instalará su programa de referidos.
Si ya estamos en la sección de instalación, podemos notar que contamos con 4 opciones para instalar el programa Código embebido, Ventana modal, Burbuja flotante y Control deslizante. Teniendo en cuenta los detalles de su tienda, puedes escoger la que desea y se adapte mejor a sus necesidades. Una vez que selecciona una de las opciones, tendrá acceso al fragmento de código correspondiente para instalar la plantilla del Programa.
Para las opciones ventana modal, burbuja flotante y control deslizante, incluyen una sección de configuración donde podrá personalizar algunos detalles como el estilo y la ubicación.
Opciones de instalación.
Sigue las instrucciones y obtendrá el código correspondiente a cada caso.
Código Embebido

<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-referral-program-home-page">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "es",
     "grInstallMethod":"embeddedcode"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS CODE SNIPPET -->
Ventana Modal

<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-referral-program-home-page">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "en",
     "grInstallMethod":"modal"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS CODE SNIPPET -->
Burbuja Flotante

<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-referral-program-home-page">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "en",
     "grInstallMethod":"bubble"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS CODE SNIPPET -->

Cargando la plantilla Portal del Promotor 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.
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
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".
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 intentar cambiando el editor. A continuación le explicamos los pasos que debe seguir.
i

Change 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.
Para obtener el fragmento de código iremos a la sección de Integraciones-Code Snippets-Seguimiento de Conversiones-Escenarios. En esta sección puede encontrar una selección de escenarios que se ajustan a sus necesidades, debe seleccionar el que se aplique a su sitio web. Según el que se escoja varían los pasos a seguir y los fragmentos a instalar. Para esta guía se escogió el escenario E004.

Configuración de los scripts de Seguimiento y Conversión.

Obtener los fragmentos de código para realizar el seguimiento y conversión.
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.

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


<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
     grCookieLifeTime:"180"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.catchReferrer(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->  

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

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.

Checking the advocate data on your Joomla website

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

omo 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


<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page",
     "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) **/
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.processCustomerAndBonus(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->

Aquí está cómo 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 parámetros (name, last name and email) pero si estos parámetros no se pueden capturar en el formulario de registro, usted puede pasar el email como el nombre y el apellido.
i
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.

Finding out what parameters to use 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 has a contact form already. The only thing you need to do is to set it up so that it captures new referrals. So, for this process, we need to create a Category, a Contact that belongs to it and a Contact form. Once you have a contact form ready, we add the code snippet from Genius Referrals to it. Then, when a user sends a message using the contact form, Genius Referrals will generate a new referral (if needed) for the advocate.
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 necesidades de su negocio usted debe decidir si usa el formulario de registro, el formulario de contacto o otro formulario para capturar nuevos referidos.
i
Diríjase a Contacts en el menú desplegable Components y seleccione el submenú 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 submenú 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 menú. Así que diríjase a Menú dentro del menú desplegable Menú y seleccione el submenú 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 Extensión. 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


<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page",
     "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) **/
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.processCustomerAndBonus(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->

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 envie 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 envío 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.

Excelente!

¡Excelente! Ahí tiene la segunda referencia generada por el envío 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.
LANGUAGE