Get Started

Pon Clerk en funcionamiento en tu tienda BigCommerce en solo unos pocos pasos. Esta guía te guiará por 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 vista personal de cómo funcionará Clerk en tu tienda online, antes de configurar el resto del sistema.

Añadir tienda #

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

1. Escribe el Name y el Domain de tu tienda online.

2. Elige el Language y la Currency, y selecciona BigCommerce como Platform.

3. Haz clic en Add Store.

Instalar el seguimiento de visitantes #

En BigCommerce, debes estar conectado como Store Owner para acceder a estas configuraciones.

1. En el admin de BigCommerce, ve a Storefront > My Themes > Advanced > Edit Theme Files.

2. 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_api_key' });

  // Clerk.js Context
  Clerk('context', {
    product: {{#if cart.items}}[
      {{#each cart.items}}
        "{{product_id}}"{{#unless @last}},{{/unless}}
      {{/each}}
    ]{{else}}{{#if product.id}}"{{product.id}}"{{else}}null{{/if}}{{/if}},

    category: {{#if category.id}}"{{category.id}}"{{else}}null{{/if}},
    page: {{#if page_type}}"{{page_type}}"{{else}}null{{/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 encontrada en my.clerk.io > Developers > API Keys.

5. Haz clic en Save & apply file.

Instalar el seguimiento de pedidos #

1. En el admin de BigCommerce, ve a Settings > Advanced > Data Solutions.

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

3. Abre Affiliate Conversion Tracking y haz clic en Connect si BigCommerce te pide habilitar la conexión.

4. Pega el siguiente código 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 encontrada en my.clerk.io > Developers > API Keys..

Sincronizar datos #

La sincronización de datos conecta tu tienda BigCommerce a Clerk, permitiendo que Clerk acceda a tus productos, pedidos, clientes y demás información de la tienda. Esto habilita a Clerk para ofrecer recomendaciones personalizadas y resultados de Search basados en los datos reales de tu tienda. Sigue los pasos en la guía de Sync Data para configurar la sincronización de datos.

Visualización previa de los elementos #

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

Inicia sesión en el portal de administración de BigCommerce, luego abre Storefront > My Themes.

Busca tu tema, haz clic en el menú de tres puntos y selecciona Customize.

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

Elige el estilo que coincida con tu tema. Por ejemplo, selecciona Light para un tema claro.

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

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

Usa el menú en la esquina superior izquierda para seleccionar la página de la tienda online que quieres previsualizar.

Nota:

En el modo de previsualización, BigCommerce no permite que lleves variables a una página a la que se hace clic.

Por ejemplo, si agregas productos al carrito en el Preview, no estarán en el carrito una vez que navegues.

Para probar elementos de Clerk que requieran el paso de variables de una página a otra, asegúrate de “codificar manualmente” esas variables para hacer pruebas.

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