Bigcommerce

Get Started

Instala Clerk en BigCommerce siguiendo estos sencillos pasos

Pon Clerk en funcionamiento en tu tienda de BigCommerce en solo unos pocos pasos. Esta guía te guía a través de la conexión de tu tienda, la instalación de scripts de seguimiento y la sincronización de tus datos.

Conectar tu tienda #

Después de seguir estos sencillos pasos, podrás ver tu Live Demo, que te da una visión personal de cómo funcionará Clerk en tu tienda en línea, antes de configurar el resto del sistema.

Agregar tienda #

Después de iniciar sesión en my.clerk.io, lo primero que debes hacer es agregar tu tienda:

  1. Escribe el Nombre y el Dominio de tu tienda online.

  2. Elige el Idioma y la Moneda, y selecciona BigCommerce como la Plataforma.

  3. Haz clic en Add Store.

Add new store form

Instalar seguimiento de visitantes #

Importante: En BigCommerce, debes estar conectado como propietario de la tienda para acceder a estos ajustes.

  1. En tu administración de BigCommerce, ve a Storefront > My Themes y haz clic en Make a copy.

    Esto crea una copia segura del tema para instalar Clerk.

My themes page

  1. En el nuevo tema, haz clic en los tres puntos (…)

    y selecciona Apply para convertirlo en el tema activo.

Apply theme
  1. Haz clic en Advanced > Edit Theme Files para abrir el editor de temas.
Edit theme files
  1. En la barra lateral izquierda, abre templates > layout > base.html y pega el script de seguimiento en la sección <head> justo antes de </head>.
<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function (w, d) {
    var e = d.createElement('script');
    e.type = 'text/javascript';
    e.async = true;
    e.src = 'https://cdn.clerk.io/clerk.js';
    var s = d.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(e, s);
    w.__clerk_q = w.__clerk_q || [];
    w.Clerk = w.Clerk || function () { w.__clerk_q.push(arguments); };
  })(window, document);

  Clerk('config', { key: 'INSERT_PUBLIC_API_KEY' });

  {{#if customer.email}}
  Clerk('call', 'log/email', { email: '{{customer.email}}' });
  {{/if}}
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Reemplaza INSERT_PUBLIC_API_KEY con tu clave pública que se encuentra en my.clerk.io > Developers > API Keys.

Tracking script in base.html
  1. Haz clic en Save & apply file.

Instalar seguimiento de pedidos #

  1. En tu administración de BigCommerce, ve a Advanced Settings > Data Solutions.

  2. Activa Affiliate Conversion Tracking y haz clic en Save.

Data solutions page

  1. Abre la pestaña Affiliate Conversion Tracking.

  2. Pega lo siguiente en el apartado inferior Conversion Tracking Code y haz clic en Save.

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function (w, d) {
    var e = d.createElement('script');
    e.type = 'text/javascript';
    e.async = true;
    e.src = 'https://cdn.clerk.io/clerk.js';
    var s = d.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(e, s);
    w.__clerk_q = w.__clerk_q || [];
    w.Clerk = w.Clerk || function () { w.__clerk_q.push(arguments); };
  })(window, document);
  Clerk('config', { key: 'INSERT_PUBLIC_API_KEY' });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

<!-- Start of Clerk sales tracking -->
<script>
  Clerk('call', 'log/sale/bigcommerce', { sale: '%%ORDER_ID%%' });
</script>
<!-- End of Clerk sales tracking -->

Reemplaza INSERT_PUBLIC_API_KEY con tu clave pública que se encuentra en my.clerk.io > Developers > API Keys..

Conversion tracking code

Sincronizar datos #

Sincronizar datos conecta tu tienda de BigCommerce con Clerk, permitiendo que Clerk acceda a tus productos, pedidos, clientes y otra información de la tienda. Esto permite que Clerk proporcione recomendaciones personalizadas y resultados de búsqueda basados en los datos reales de tu tienda. Sigue los pasos en la guía de sincronización de datos para configurar la sincronización.

Previsualización de elementos #

Para comenzar a previsualizar elementos de Clerk en tu tienda online, primero deberás acceder al tema en el que has agregado Clerk.

Inicia sesión en el portal de administración de BigCommerce de tu tienda y elige " Storefront" > “My Themes” desde el menú lateral izquierdo:

My themes page

Una vez que hayas encontrado tu tema, haz clic en los tres puntos en la esquina inferior derecha y luego selecciona “Customize”:

Customize theme

Después de hacer clic en “Customize”, tendrás la opción de seleccionar un estilo de tema para personalizar.

Asegúrate de que este estilo coincida con el del tema que has elegido (por ejemplo, si estás trabajando con “Theme Light”, selecciona “Light” aquí):

Theme style selection

Elige el estilo del tema y haz clic en “Continue”.

Una vez estés en la página de Previsualización, asegúrate de seleccionar “Preview” en la parte superior de la pantalla.

En la esquina superior izquierda, puedes elegir la página específica de la tienda que deseas previsualizar, en este ejemplo, la página de inicio:

Preview page

Nota:

En el modo previsualización, BigCommerce no permite llevar variables a una página a la que se accede después de hacer clic.

Por ejemplo, si agregas productos al carrito en Previsualización, no estarán en el carrito cuando hagas clic para avanzar.

Para probar elementos de Clerk que requieran el traspaso de variables de una página a otra, asegúrate de “programar” esas variables de forma manual para pruebas.

Por ejemplo, establece tu consulta de búsqueda en una palabra clave específica, o elige un ID de producto específico agregado al carrito.

Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.