Get Started
Pon Clerk en funcionamiento en tu tienda Shopify en solo unos pocos pasos. Esta guía te acompaña en la conexión de tu tienda, la instalación del seguimiento y la sincronización de tus datos.
Conectando tu tienda #
El primer paso para instalar Clerk es conectar tu tienda con tu cuenta Clerk.
El video a continuación te muestra qué hacer, paso a paso. Utiliza el resto de la guía como referencia.
Después de seguir estos sencillos pasos, podrás ver tu Live Demo Store, que te ofrece una visión personal de cómo funcionará Clerk en tu tienda online.
Añadir tienda #
Inicia sesión en my.clerk.io. La primera vez que lo hagas, verás la página Añadir nueva tienda.
Escribe el Nombre y Dominio de tu tienda online.
Elige Shopify como Plataforma y selecciona tu Moneda.
Haz clic en Add Store.
Instalar el seguimiento de visitantes #
En el backend de Shopify, ve a Online Store > Themes.
Haz clic en ... > Edit code para el tema que deseas modificar.
Abre
settings_schema.jsony añade el fragmento de configuración de Clerk al final, justo antes del último].
,
{
"name": "Clerk settings",
"settings": [
{
"type": "header",
"content": "Clerk"
},
{
"type": "checkbox",
"id": "enable_clerk",
"label": "Enable Clerk",
"default": true
}
]
}
Haz clic en Save.
Bajo Snippets, haz clic en Add a new snippet llamado
clerk-tracking.liquidy haz clic en Done.Inserta tu fragmento de seguimiento de visitantes de Clerk en el nuevo archivo y haz clic en Save. Sustituye INSERT_PUBLIC_API_KEY por tu Public Key obtenida desde my.clerk.io > Developers > API Keys.
<!-- 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 = (d.location.protocol == 'https:' ? 'https' : 'http') + '://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);
let publicKey = 'INSERT_PUBLIC_API_KEY';
Clerk('config', {
key: publicKey,
formatters: {
currency_converter: function (price) {
var converted_price = (price * Shopify.currency.rate);
return (converted_price).toString();
}
},
globals: {
currency_iso: "{{ cart.currency.iso_code }}",
currency_symbol: "{{ cart.currency.symbol }}"
}
});
// Clerk.js Context
Clerk('context', {
product: {% if product %}{{ product.id }}{% else %}null{% endif %},
category: {% if collection %}{{ collection.id }}{% else %}null{% endif %},
page: {% if product %}null
{% elsif collection %}null
{% elsif page %}{{ page.id }}
{% elsif blog %}{{ blog.id }}
{% elsif article %}{{ article.id }}
{% elsif template.name == 'index' %}'homepage'
{% else %}'{{ template.name }}'
{% endif %}
});
{% if customer %}
Clerk('call', 'log/email', { email: "{{ customer.email }}" });
{% endif %}
document.addEventListener('DOMContentLoaded', (e) => {
(async function fetchVisitorId() {
let visitorId = window.sessionStorage.getItem('visitor_id');
try {
if (!visitorId) {
const response = await fetch(`https://api.clerk.io/v2/misc/visitor_id?key=${publicKey}&visitor=auto`);
const data = await response.json();
visitorId = data.visitor;
window.sessionStorage.setItem('visitor_id', data.visitor);
}
Clerk('config', {
visitor: visitorId,
});
} catch (error) {
console.error('Error:', error);
} finally {
window.Shopify.analytics.publish('clerk_pixel_context', {
localeApiKey: publicKey,
visitor: visitorId,
});
}
})();
});
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
- Abre
theme.liquidy agrega esto justo antes de</head>:
{% if settings.enable_clerk %}
{% render 'clerk-tracking' %}
{% endif %}
Instalar el seguimiento de pedidos #
En Shopify, ve a Settings > Customer Events.
Haz clic en Add custom pixel, nómbralo Clerk.io y luego haz clic en Add pixel.
Pega tu código de seguimiento de ventas de Clerk y haz clic en Save.
analytics.subscribe("clerk_pixel_context", (event) => {
browser.localStorage.setItem("clerkPixelContext", JSON.stringify(event.customData));
});
analytics.subscribe("checkout_completed", async (event) => {
const pixelContextRaw = await browser.localStorage.getItem("clerkPixelContext");
const pixelContext = await JSON.parse(pixelContextRaw);
const checkout = event.data.checkout;
fetch(`https://api.clerk.io/v2/log/sale/shopify`, {
method: "POST",
mode: "cors",
body: JSON.stringify({
sale: checkout.order.id,
key: pixelContext.localeApiKey,
visitor: pixelContext.visitor,
}),
});
});
- Haz clic en Connect y confirma.
Sincronizar datos #
La sincronización de datos conecta tu tienda Shopify con Clerk, permitiendo que Clerk acceda a tus productos, pedidos, clientes y otra información de la tienda. Esto habilita a Clerk para proporcionar 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.
Múltiples dominios/idiomas #
La forma más sencilla de implementar Clerk en varios dominios en configuraciones estándar es crear una tienda separada para cada dominio en my.clerk.io y sincronizarlas con cada uno de tus dominios de idiomas de Shopify.
Esto te permite separar productos, ventas, monedas, etc., para mantener el control de cada dominio.
Configuración de tiendas #
Comienza creando tu tienda principal y sigue la Guía de configuración para conectar tu tienda con Clerk. Elige las Recommendations y/o Search que deseas mostrar en tu tienda online.
Cuando hayas finalizado la configuración inicial, haz clic en "+ Add new Store" – la última opción en la lista desplegable (normalmente aparece debajo de tu(s) tienda(s) y nombre de empresa existentes):
En la página Add New Store, introduce los detalles de tu dominio.
Haz clic en Copy from existing Store? y selecciona la tienda de la que deseas copiar elementos. Después haz clic en Add Store. Esto transferirá los Elements y Designs de tu tienda principal.
Sigue de nuevo la Guía de configuración para activar Clerk haciendo clic en Settings > Setup Guides para Sync Data para el nuevo dominio.
Una vez se complete la Sincronización de datos, tu dominio estará listo y utilizando la misma configuración que tu tienda principal.
Repite este proceso para cada uno de tus dominios de idiomas de Shopify.
Finalmente, modifica el script de seguimiento en tu tema de Shopify para incluir la clave pública correcta para cada dominio.
Aquí tienes un ejemplo del script de seguimiento modificado para incluir varios idiomas:
<!-- 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);
document.addEventListener("DOMContentLoaded", (e) => {
let publicKey;
switch (Shopify.locale) {
case 'nl':
publicKey = 'KEY';
break;
case 'en':
publicKey = 'KEY';
break;
case 'es':
publicKey = 'KEY';
break;
case 'it':
publicKey = 'KEY';
break;
case 'fr':
publicKey = 'KEY';
break;
case 'de':
publicKey = 'KEY';
break;
}
Clerk("config", {
key: publicKey,
formatters: {
currency_converter: function (price) {
var converted_price = (price * Shopify.currency.rate);
return (converted_price).toString();
}
},
globals: {
currency_iso: "{{ cart.currency.iso_code }}",
currency_symbol: "{{ cart.currency.symbol }}",
clerkShopLocale: "{{ shop.locale }}",
template_name: "{{ template.name }}",
clerkCountry: "{{ routes.root_url }}"
}
});
// Clerk.js Context
Clerk('context', {
product: {% if product %}{{ product.id }}{% else %}null{% endif %},
category: {% if collection %}{{ collection.id }}{% else %}null{% endif %},
page: {% if product %}null
{% elsif collection %}null
{% elsif page %}{{ page.id }}
{% elsif blog %}{{ blog.id }}
{% elsif article %}{{ article.id }}
{% elsif template.name == 'index' %}'homepage'
{% else %}'{{ template.name }}'
{% endif %}
});
; (async function fetchVisitorId() {
let visitorId = window.sessionStorage.getItem('visitor_id');
try {
if (!visitorId) {
const response = await fetch(`https://api.clerk.io/v2/misc/visitor_id?key=${publicKey}&visitor=auto`);
const data = await response.json();
visitorId = data.visitor;
window.sessionStorage.setItem('visitor_id', data.visitor);
}
Clerk('config', {
visitor: visitorId,
});
} catch (error) {
console.error('Error:', error);
} finally {
window.Shopify.analytics.publish('clerk_pixel_context', {
localeApiKey: publicKey,
visitor: visitorId,
});
}
})();
});
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
Recuerda traducir los Headlines en Element -> Edit -> Select Design al idioma correcto también.
Múltiples inventarios #
Si tienes una sola tienda con múltiples inventarios e idiomas, entonces necesitarás crear múltiples aplicaciones Clerk para asegurar una sincronización de datos rápida.
Esto se hace para que las tiendas no compartan el mismo rate limit y la tasa de restauración en la Shopify ADMIN API.
En el backend de Shopify, ve a Apps > Develop apps para tu tienda.
Haz clic en el botón Create an app y repite estos pasos hasta tener tantas aplicaciones “Clerk.io” como subdominios tenga la tienda.
Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.