Get Started
Pon Clerk en funcionamiento en tu tienda de BigCommerce en solo unos pocos pasos. Esta guía te lleva paso a paso para conectar tu tienda, instalar los scripts de seguimiento y sincronizar tus datos.
Conectar tu tienda #
Después de seguir estos sencillos pasos podrás ver tu Live Demo, que te ofrece una visión personal de cómo Clerk funcionará 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 añadir tu tienda:
Escribe el Name y Domain de tu tienda online.
Elige el Language y Currency, y selecciona BigCommerce como la Platform.
Haz clic en Add Store.
Instalar el seguimiento de visitantes #
En BigCommerce, debes estar conectado como Store Owner para acceder a estos ajustes.
En el panel de administración de BigCommerce, ve a Storefront > My Themes > Advanced > Edit Theme Files.
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 que se encuentra en my.clerk.io > Developers > API Keys.
- Haz clic en Save & apply file.
Instalar el seguimiento de pedidos #
En tu panel de administración de BigCommerce, ve a Settings > Advanced > Data Solutions.
Habilita Affiliate Conversion Tracking y haz clic en Save.
Abre Affiliate Conversion Tracking y haz clic en Connect si BigCommerce te pide habilitar la conexión.
Pega lo siguiente en el campo 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 Public Key que se encuentra en my.clerk.io > Developers > API Keys..
Sincronizar datos #
La sincronización de datos conecta tu tienda 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 de datos.
Previsualizar elementos #
Para comenzar a previsualizar los elementos de Clerk en tu tienda online, primero accede al tema en el que has añadido Clerk.
Inicia sesión en el portal de administración de tu tienda BigCommerce, luego elige " Storefront" > “My Themes” en el menú del lado izquierdo:
Una vez que hayas encontrado tu tema, haz clic en los tres puntos en la esquina inferior derecha, luego selecciona “Customize”:
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”, elige “Light” aquí):
Elige el estilo del tema y luego haz clic en “Continue.”
Una vez que estés en la página de Preview, 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 tu tienda que quieres previsualizar, por ejemplo, la homepage:
Nota:
En modo de preview, BigCommerce no permite que lleves variables a la página a la que haces clic.
Por ejemplo, si añades productos al carrito en Preview, no estarán en el carrito una vez que hagas clic para avanzar.
Para probar elementos de Clerk que requieren el traspaso de variables entre páginas, asegúrate de “hard codear” esas variables para la prueba.
Por ejemplo, configura tu búsqueda con una palabra clave específica, o elige un ID de producto específico 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.