Shopify

Get Started

Instala Clerk.io en Shopify siguiendo estos sencillos pasos.

Conectando tu Tienda #

El primer paso para instalar Clerk.io es conectar tu Tienda con tu cuenta de Clerk.io.

El video a continuación te muestra qué hacer, paso a paso. Usa el resto de la guía como referencia :)

Después de seguir estos simples pasos, podrás ver tu Tienda de Demostración en Vivo, que te brinda una visión personal de cómo funcionará Clerk.io en tu tienda en línea.

1. Agregar Tienda #

Inicia sesión en my.clerk.io. La primera vez que lo hagas, verás la página Agregar Nueva Tienda.
Escribe el Nombre y el Dominio de tu tienda en línea.
Elige Shopify como la Plataforma y selecciona tu Moneda.
Haz clic en Agregar Tienda.

2. Configurar la Conexión de Shopify #

Desde el menú principal de la Guía de Configuración, haz clic en Sincroniza tus datos.
Esta guía de configuración muestra lo que necesitas hacer en tu backend de Shopify. Aquí hay un esquema de los pasos:
En el backend de Shopify, ve a Apps > Configuración de apps y canales de ventas > Desarrollar apps.
Haz clic en Crear una app en la esquina superior derecha.
Dale a la app un nombre como “Clerk.io” y selecciona a ti mismo como el Desarrollador de la app.
Haz clic en Crear app.
Haz clic en Configuración y encuentra Integración de API de Admin. Haz clic en Configurar.
Bajo Alcances de acceso a la API de Admin, selecciona Acceso de lectura (comienza con “read_”) para lo siguiente:

Clientes
Inventario
Páginas de la Tienda en Línea
Pedidos
Reglas de precios
Productos
Publicaciones
Locales de la tienda
Mercados de Shopify
Contenido de la tienda
Traducciones

Haz clic en Guardar.
Haz clic en Instalar App y luego en Instalar en la ventana emergente que aparece.
Haz clic en la pestaña Credenciales de API.

3. Sincroniza tu Tienda #

Ahora copia y pega toda la información necesaria en los campos en my.clerk.io:

Dominio de Shopify (tudominio.myshopify.com)
Clave API
Token de acceso a la API de Admin
Clave secreta de API

Haz clic en Iniciar Sincronización. Espera a que la sincronización termine. Quizás tómate una taza de café si tienes un gran catálogo de productos ;)
¡Eso es todo!

4. Agregando Clerk.io a tu tema #

Instala el Seguimiento de Visitantes (clerk.js)

Inicia sesión en el backend de Shopify y ve a Tienda en Línea → Temas.
A la derecha del tema en el que deseas instalar Clerk, haz clic en "…" → Editar código.
Abre el archivo settings_schema.json. Inserta el fragmento de configuración de Clerk al final del archivo, justo antes del último ].

,  
{
"name": "Configuración de Clerk",
"settings": [
    {
    "type": "header",
    "content": "Clerk"
    },
    {
    "type": "checkbox",
    "id": "enable_clerk",
    "label": "Habilitar Clerk",
    "default": true
    }
]
}

Presiona Guardar
En la barra izquierda, bajo “Fragmentos”, haz clic en Agregar un nuevo fragmento llamado clerk-tracking, y haz clic en Listo.
Inserta el siguiente script de seguimiento de Clerk.io en el archivo y haz clic en Guardar. Recuerda reemplazar PUBLIC_KEY con la clave API pública de tu Tienda Clerk.

<!-- Inicio de la herramienta de Personalización de E-commerce de Clerk.io - 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 = 'PUBLIC_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 }}'
        }
    });

    {% 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>
<!-- Fin de la herramienta de Personalización de E-commerce de Clerk.io - www.clerk.io -->

Abre el archivo theme.liquid. Inserta la referencia al script de seguimiento en el encabezado del documento, justo antes de la etiqueta </head>.

{% if settings.enable_clerk %}
    {% render 'clerk-tracking' %}
{% endif %}

5. Instalar Seguimiento de Pedidos #

En el backend de Shopify, ve a Configuración → Eventos de Clientes.
Haz clic en Agregar píxel personalizado, nómbralo Clerk.io y haz clic en Agregar píxel.
Inserta el siguiente Código de Seguimiento de Ventas en el campo de código. Haz clic en Guardar.
Después de guardar, haz clic en conectar y confirma conectar.

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,
        }),
    });
});

Ejemplo de instalación completa #

Shopify ha actualizado la forma en que se agregan las Apps Privadas. Estamos trabajando en una nueva versión del video. Hasta entonces, consulta cómo agregar una App Privada aquí.

En este video puedes obtener una visión completa de lo que se necesita para configurar Clerk.io en una tienda Shopify.

Múltiples dominios/idiomas #

La forma más fácil de implementar Clerk.io en múltiples dominios en configuraciones estándar es creando una Tienda separada para cada dominio en my.clerk.io y sincronizándolas con cada uno de tus dominios de idioma de Shopify.

Esto te permite separar productos, ventas, monedas, etc. para hacer un seguimiento de cada dominio.

Comienza creando tu Tienda principal y sigue la Guía de Configuración para conectar tu Tienda a Clerk.io. Elige las Recomendaciones y/o Búsqueda que deseas mostrar en tu tienda en línea.
Cuando hayas completado la configuración inicial, haz clic en "+ Agregar nueva Tienda" - la última opción en la lista desplegable (típicamente encontrada debajo de tus Tiendas existentes y el nombre de la empresa):

3. En la página Agregar Nueva Tienda, ingresa los detalles de tu dominio.

4. Haz clic en ¿Copiar de la Tienda existente? y selecciona la Tienda de la que deseas copiar contenido. Luego haz clic en Agregar Tienda. Esto transferirá el Contenido y los Diseños de tu Tienda principal.

5. Sigue la Guía de Configuración nuevamente para activar Clerk.io haciendo clic en Configuración -> Guías de Configuración para Sincronizar Datos para el nuevo dominio.

6. Una vez que la Sincronización de Datos esté completa, tu dominio estará listo y utilizando la misma configuración que tu Tienda principal.

7. Repite este proceso para cada uno de tus dominios de idioma de Shopify.

8. Finalmente, modifica el script de seguimiento en tu tema de Shopify para incluir la clave pública correcta para cada dominio.

Aquí hay un ejemplo del script de seguimiento modificado para incluir múltiples idiomas:

<!-- Inicio de la herramienta de Personalización de E-commerce de Clerk.io - 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 }}"
      }
    });

    ; (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>
<!-- Fin de la herramienta de Personalización de E-commerce de Clerk.io - www.clerk.io -->

Múltiples Inventarios #

Si tienes una sola Tienda con múltiples inventarios e idiomas, entonces necesitarás crear múltiples Apps de Clerk.io para asegurar una rápida sincronización de datos. Esto se hace para que las Tiendas no compartan el mismo límite de tasa y tasa de restauración en la API ADMIN de Shopify.

En el backend de Shopify, ve a Apps > Desarrollar apps para tu Tienda.
Haz clic en el botón Crear una app, y repite estos pasos hasta que tengas un número equivalente de apps “Clerk.io” al número de subdominios de 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.