Integración de Shift4Shop con Genius Referrals para tu Programa de Referidos

Aprende cómo integrar tu tienda en línea de Shift4Shop (antes 3dcart) con Genius Referrals de manera sencilla. Sigue nuestra guía paso a paso para desbloquear potentes capacidades de marketing de referidos. Ideal para negocios de comercio electrónico que buscan mejorar la participación del cliente y aumentar ventas con plantillas personalizables y funciones robustas.

Shift4Shop es una plataforma de comercio electrónico que permite a las empresas crear y gestionar tiendas en línea. Ofrece herramientas para el diseño de tiendas, gestión de productos, procesamiento de pagos y marketing. También proporciona funcionalidades para optimizar SEO y analizar el rendimiento del negocio.

Nota: La integración de Shift4Shop solo está disponible en ciertos planes de Genius. Consulte nuestros planes y precios aquí.

Requisitos Previos

  1. Registro en la plataforma: Regístrate en Genius Referrals.
  2. Portal del promotor: Selecciona y personaliza una plantilla para tu programa de referidos Genius Referrals. Este portal es para diferentes tipos de usuarios como Prospectos, Agentes, Afiliados e Influencers.
  3. Tienda en Shift4Shop: Necesitas acceso en una tienda activa de Shift4Shop para agregar fragmentos de código para integrar tu programa de referidos.

Paso 1: Iniciando la Integración de Shift4Shop con Genius Referrals

Para integrar el programa de Genius Referrals en tu tienda Shift4Shop, deberás insertar tres fragmentos de código específicos en páginas diferentes:

  1. Fragmento para instalar la plantilla del portal de promotores.
  2. Fragmento de código de seguimiento en la página de inicio para monitorizar referidos.
  3. Fragmento de código de conversión en la página de agradecimiento tras la compra.
Consulta la sección siguiente para obtener instrucciones detalladas y ejemplos para cada caso en tu tienda.

Paso 2: Selección del Fragmento de Código para Integración con Shift4Shop

Según las características de su tienda web debe seleccionar la opción de instalación del programa que mejor se adapte a sus necesidades: Código embebido, Ventana emergente o Burbuja flotante. Para consultar los detalles de cada uno de los scripts puede seguir la siguiente ruta en la plataforma de Genius Referrals: Configurar Programa > Integraciones > Fragmentos de Código > Instalación.

Para las opciones Ventana emergente y Burbuja flotante se incluye una sección de configuración donde podrá personalizar algunos detalles como el estilo y la ubicación.
Opciones de instalación para integrar su programa de referidos con terceros.

Para generar el fragmento de código que necesitas:


  1. Haz clic en la opción deseada.
  2. Selecciona la página que deseas instalar.
  3. Copia el fragmento de código correspondiente.
  4. Sigue las instrucciones para instalarlo en tu tienda.
Este proceso te proporcionará el código necesario para integrar el Portal de Promotores en Shift4Shop.
Código embebido
Para instalar el programa de referidos en Shift4Shop con la opción de Código embebido utilice el fragmento de código siguiente:
<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-genius-magpie-template-73">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "your-advocate-portal",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "en",
     "grInstallMethod":"embeddedcode"
},
e=window,t=document;e.addEventListener("DOMContentLoaded",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.6.1.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 emergente
Para instalar el programa de referidos en Shift4Shop con la opción de Ventana emergente utilice el fragmento de código siguiente:
<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-genius-magpie-template-73">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "your-advocate-portal",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "en",
     "grInstallMethod":"modal"
},
e=window,t=document;e.addEventListener("DOMContentLoaded",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.6.1.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
Para instalar el programa de referidos en Shift4Shop con la opción de Burbuja flotante utilice el fragmento de código siguiente:
<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-genius-magpie-template-73">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "your-advocate-portal",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "en",
     "grInstallMethod":"bubble"
},
e=window,t=document;e.addEventListener("DOMContentLoaded",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.6.1.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 -->

Paso 3: Instalación del Portal del Promotor en Shift4Shop

Sigue estos pasos para agregar la plantilla de Genius Referrals a tu tienda en Shift4Shop:

  1. Accede a tu Cuenta Shift4Shop e inicia sesión con tus credenciales.
  2. Crea una nueva página en Shift4Shop con diseño de página en blanco y nómbrala "Refiere y Gana".
  3. Inserta un bloque de columna con la variación del 100%.
  4. En el bloque de columna, agrega un bloque de HTML personalizado y ajusta su ancho a "Full width."
  5. Pega el fragmento de código seleccionado en el Paso 2.
  6. Guarda todos los cambios y carga la página "Refiere y Gana" para ver la plantilla.
Installing the conversion code snippet in 3dcart

Paso 4: Selección de los Scripts de Seguimiento y Conversión

  1. Ve a la sección de "Integraciones" en la plataforma de Genius Referrals.
  2. Navega a la subsección de "Fragmentos de Código".
  3. Localiza el apartado "Seguimiento de conversiones", haz clic en "Plataforma".
  4. Selecciona Shift4Shop en el selector de plataformas.
  5. Establece el tiempo de expiración de las cookies, que es el tiempo durante el cual la cookie de seguimiento permanece activa en los navegadores para rastrear tus referidos (por ejemplo, 180 días).
  6. Haz clic en el botón Siguiente para generar el fragmento de código.
Fragmento de código para seguimiento
<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
     grCookieLifeTime:"210"
},
e=window,t=document;e.addEventListener("DOMContentLoaded",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.6.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 -->

Paso 5: Instalación del código de Seguimiento y Conversión en Shift4Shop

  1. Inicia sesión en tu Store Manager.
  2. En la navegación de la izquierda, ve a Contenido → Contenido del sitio → ¿Desea editar otras secciones? → Encabezado y pie de página.
  3. Agrega el script en el campo Global Footer con el modo WYSIWYG desactivado.
  4. Haz clic en el botón "Guardar" en la parte superior derecha de la página para guardar los cambios.

A continuación, regresa al Portal de Genius Referrals y haz clic en el botón "Siguiente" para generar el segundo script de conversión. Copia el fragmento del código de seguimiento e instálalo siguiendo estas instrucciones:

  1. Inicia sesión en tu Store Manager.
  2. Ve a Contenido → Contenido del sitio → ¿Desea editar otras secciones? → Títulos y contenido.
  3. Busca "Pagar # 4" y haz clic en el botón "Acciones → Editar" que se encuentra en el extremo derecho de la lista de páginas.
  4. Agrega el script en la sección de Footer.
  5. Haz clic en "Guardar cambios".
Fragmento de código para Conversión
<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referrals-landing-page-748",
     "grCustomerFirstname": "[ofirstname]",
     "grCustomerLastname": "[olastname]",
     "grCustomerEmail": "[oemail]",
     "grCustomerCurrencyCode": "USD",
     "grCanRefer": false,
     "grReference" : "Invoice Number: [invoice-prefix] [invoice-number]",
     "grPaymentAmount" : "[total_noformat]"
},
e=window,t=document;e.addEventListener("DOMContentLoaded",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.6.2.min.js",e.onload=function(){GRToolbox.processCustomerAndBonus(grSetting).then(e=>{})};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->

Paso 6: Prueba y Verificación

Una vez que complete la instalación, su programa de referidos debe estar en funcionamiento correctamente, sus clientes y visitantes podrán acceder al programa y recomendar sus servicios.

1 - Verificar Adición del Enlace de Navegación: Busca un nuevo enlace en el menú de navegación del sitio web etiquetado como 'Referir y Ganar'. Los visitantes y clientes (promotores) pueden acceder a este enlace para participar en el programa de referidos.

2 - Interfaz del Programa de Referidos: Navega a la página del Programa de Referidos para encontrar una interfaz amigable donde los promotores pueden:
  • Conocer el funcionamiento del programa.
  • Inscribirse para participar.
  • Referir tus productos a través de varios canales de promoción como enlaces personales, correos electrónicos, publicaciones en redes sociales, blogs, chats, etc.
  • Monitorear el rendimiento del programa y adaptar estrategias basadas en los referidos generados y los bonos obtenidos.
  • Gestionar bonos y pagos, canjeables por créditos, efectivo a través de PayPal, tarjetas de regalo, productos, cupones, y más.

Escenario: Cómo Funciona el Programa de Referidos

En este escenario, considera las siguientes suposiciones:

  • Operas una tienda en Shift4Shop especializada en la venta de camisetas en línea.
  • Se ha establecido un programa de referidos con Genius Referrals, que permite a los clientes y visitantes referir tus productos a su red.
  • La campaña de referidos recompensa a los clientes con $10 por cada referido calificado, definido como un referido que completa una compra.
  • John Smith, un cliente leal, está entusiasmado por compartir tus productos con amigos y familiares. Sus detalles son los siguientes:
- Nombre: John.
- Apellidos: Smith
- Correo electrónico: john@example.com

  • John refirió a su amigo Matt a tu tienda para que pudiera comprar camisetas. Los detalles de Matt son los siguientes:
- Nombre: Matt
- Apellidos: Hanks
- Correo electrónico: matt@example.com

  • Al completar Matt una compra, John recibe un bono de $10 según los términos del programa de referidos.
Consulta la imagen proporcionada para una representación visual del flujo del programa de referidos que estaremos probando.
Flujo del escenario del Programa de Referidos.

Probar que John puede compartir sus productos

Para que John pueda referir productos con éxito, debe acceder a la página del programa de referidos y utilizar las herramientas de referencia disponibles.

John puede utilizar estas herramientas ubicadas en la pestaña "Compartir". En este escenario, John comparte su URL personalizada con Matt, lo que permite a Matt explorar tus productos y realizar una compra.
Permitir que tus clientes refieran tus servicios en tu programa de referidos.

Probar la creación de referencias

Después de que John comparta tus productos con Matt, Matt hace clic en el enlace de compartición de John y llega a la página de aterrizaje de referidos de tu tienda.

Matt procede a explorar los productos, añadir algunos al carrito y completar una compra. Tras la compra de Matt, se genera un nuevo referido en Genius Referrals. Para verificar la creación del nuevo referido, navega a la sección de Miembros. Matt debería estar en el listado de referidos.
Generando una nueva referencia.

Probar la Asignación de Bonos

Para asegurarte de que John reciba un bono tras la compra de Matt, sigue estos pasos:

  1. Una vez que Matt complete la compra y el estado del pedido se actualice a "Pago aceptado", John debería recibir un bono de $10 en Genius Referrals.
  2. Navega a la sección de Bonificaciones para confirmar si el nuevo bono de John se refleja en la lista.

Al realizar estas pruebas, podrás verificar el funcionamiento de tu programa de referidos, asegurando que los promotores como John, reciban una recompensa adecuada por sus referidos exitosos.
Bonificación otorgada al promotor en el programa de referencia.
¿Fue útil esta página?
English
IDEOMA