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.

Conectando tu tienda #

Después de seguir estos simples pasos, podrás ver tu Live Demo, que te dará una visión general personalizada de cómo Clerk funcionará en tu tienda online, 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 el seguimiento de visitantes #

Importante: En BigCommerce, debes estar conectado como Store Owner para acceder a estos ajustes.

  1. En tu panel de 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 hacerlo 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' });

  // Clerk.js Context
  Clerk('context', {
    product: {{#if product.id}}'{{product.id}}'{{else}}null{{/if}},
    category: {{#if category.id}}'{{category.id}}'{{else}}null{{/if}},
    page: {{#if product.id}}null{{else}}{{#if category.id}}null{{else}}'{{page_type}}'{{/if}}{{/if}}
  });
  {{#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 Public Key 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 de Affiliate Conversion Tracking.

  2. Pega lo siguiente en la parte inferior de 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 Public Key que se encuentra en my.clerk.io > Developers > API Keys..

Conversion tracking code

Sincronizar datos #

Sincronizar los 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 brinde 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 de datos.

Previsualizar elementos #

Para empezar a previsualizar los elementos de Clerk en tu tienda online, primero deberás acceder al tema que usaste para agregar Clerk.

Inicia sesión en el portal de administración de tu tienda BigCommerce, luego elige “Storefront” > “My Themes” en el menú de la izquierda:

My themes page

Una vez que hayas encontrado tu tema, haz clic en los tres puntos en la esquina inferior derecha y luego elige “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 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.”

Cuando 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 online que deseas previsualizar, como la Homepage en este ejemplo:

Preview page

Nota:

En el modo de previsualización, BigCommerce no permite que las variables se trasladen a una página tras hacer clic.

Por ejemplo, si agregas productos al carrito en Preview, no estarán en el carrito una vez que hagas clic para continuar.

Para probar los elementos de Clerk que requieren que las variables se transfieran de una página a otra, asegúrate de “codificar manualmente” esas variables para realizar la prueba.

Por ejemplo, establece tu consulta de búsqueda en una palabra clave específica o elige un ID de producto añadido 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.