gopersonal Platform
Español
Español
  • Guia de Usuario
    • Primeros Pasos
      • ¿Cómo funciona?
      • Conceptos básicos
      • Roadmap
    • Novedades
      • Q3 2024
      • Q2 2024
      • Q1 2024
      • Q4 2023
    • Navegación General
      • Login
      • Proyectos
      • Top bar
      • Menu
      • Configuraciones
        • Límites de frecuencia por canal
    • Dashboard
    • Analytics
      • Recomendaciones
      • Broadcasts
      • Journeys
      • Generales
      • Uso
    • Segmentación
      • Lista de Contactos
      • Explorador de Audiencias
      • Audiencias
        • Nueva Audiencia
        • Condiciones de Audiencia
          • Comportamiento de visitas
          • Comportamiento de compras
          • Afinidad
          • Predictivo
          • Propiedad de cliente
          • RFM
          • Lista de Contactos
          • Interacciones con Items
          • Interacciones Custom
          • Live Shopping
          • Ubicación
        • Destinos
          • Facebook Ads
    • Personalizaciones
      • Listado de personalizaciones
      • Contenido Web
      • Recomendaciones
      • Recolector de Feedback
      • Pop Up
      • Notificaciones
      • Código Custom
      • API
      • Experiencias
        • Targeting
          • Comportamiento visita en la sesión
          • Comportamiento de compra en la sesión
          • Interacciones con items en la sesión
          • Interacciones custom en la sesión
          • Lista de contactos
          • Afinidad en la sesión
          • Audiencia
          • Ubicación
          • Clima
          • Dispositivo
          • Tiempo
        • Variantes
          • Nueva Variante desde 0
          • Nueva Variante mediante template de gopersonal
          • Nueva Variante mediante template guardado previamente
          • Variables
        • Pruebas A/B
    • Journeys
      • Listado de User Journeys
      • Editor Workflow
        • Trigger
        • Espera
          • Esperar por tiempo
          • Esperar por propiedad de cliente
          • Esperar por interacción
          • Esperar hasta intervalo
        • Control de flujo
          • Condiciones simples
          • Condiciones complejas
          • A/B testing de caminos
          • Chequeo Contactabilidad
          • Reglas
        • Canales
          • Email
          • SMS
          • App Push Notification
          • Web Push Notification
          • Variables dinámicas
        • Acciones
          • Invocar API
          • Ejecutar Script
    • Broadcasts
      • Listado de broadcasts
      • Nuevo Broadcast
        • Email
          • Editor Drag & Drop
          • Editor HTML
          • Templates
          • Parámetros UTM
          • Apple Mail Privacy Protection (MPP)
        • SMS
        • App Push Notification
        • Web Push Notification
        • A/B Testing
      • Enviar Broadcast
      • Generador de Texto
    • Clientes
      • Vista 360 de cliente
    • Recomendaciones
      • Estrategias de Recomendaciones
      • Estrategias Custom
        • Listado de Estrategias Custom
        • Customizar una estrategia
        • Mix de Estrategias
        • Promocionar Items manualmente
        • Promocionar Items por filtro
        • Categorías cruzadas
    • Catálogos
      • Propiedades
        • Propiedades Standard
        • Condiciones
      • Componentes de Email
        • Listado de Componentes
        • Recomendaciones en Email
    • Go live Shopping
      • Analytics
        • Llamadas
        • Videos
      • Disponibilidades
      • Campañas
      • Grupos
      • Eventos
      • LLamadas
      • Agenda
      • Host App
        • Introducción
        • App
        • Próximos eventos
        • Eventos
        • Perfil
      • Llamada
      • Show
    • Go search
      • Analytics
      • Búsquedas
      • Configuraciones
        • General
        • Propiedades
        • Ranking
        • Sinónimos
        • Redireccionaes a URL
        • Probar Search
    • Go loyalty
      • Analytics
      • Miembros
      • Niveles
      • Campañas
        • Configurar Campaña
      • Recompensas
        • Recompensa de Tipo Material
        • Recompensa de tipo Cupón descuento
        • Recompensa de tipo Convertir puntos en cupón
      • Canjes
      • Página Loyalty
    • Integraciones
    • Colaboradores
  • Integraciones
    • Facebook Ads
  • Developers
    • Plataforma Ecommerce
      • Magento
        • Go Search API
      • Woocommerce
      • VTEX
        • API Credentials: Setup Guide for Gopersonal Integration
      • SDK Integration Guide for E-Commerce Websites
    • Channels Setup
      • Web Push Notification
    • API Reference
      • Items
      • Interacciones
      • Search
      • Recommendations
Powered by GitBook
On this page
  • Important Concepts
  • Pre-requirements
  • Installation Steps
  • Customer Authentication Management
  • Adding Interactions
  1. Developers
  2. Plataforma Ecommerce

SDK Integration Guide for E-Commerce Websites

This documentation provides a detailed guide on integrating the GoPersonal SDK into an e-commerce website. The integration is essential for enabling personalized content and recommendations for your customers. This guide is particularly relevant if you are not using a supported platform like WooCommerce, Magento, Shopify, etc.

Important Concepts

  • Custom Integration Requirement: Integration with the GoPersonal SDK is required if your e-commerce platform is not directly supported.

  • Single Page Application (SPA) Consideration: Identify whether your site is a Single Page Application, as additional SPA-specific considerations apply.

Pre-requirements

Before beginning the integration process, ensure you have received a unique clientId for each environment (e.g., development, testing, and production). Each clientId is associated with one or more domains. You can configure these associations in the GoPersonal dashboard under Integrations.

Installation Steps

To enable personalization features across your website, follow these installation steps on every page where you wish personalization to occur. This process is akin to integrating Google Analytics, requiring you to insert a script within the <head> tags of your HTML pages.

  1. Script Installation: Replace REPLACE_ME_CLIENT_ID with your actual clientId in the script below and add it to the <head> section of your HTML pages.

    Copy

    <script>
    async function initializeGSSDK() {
        window.gsSDK = await new window.GSSDK.default('REPLACE_ME_CLIENT_ID', {
            provider: 'Custom',
            context: { pageType: 'home' } // This context varies based on the page
        });
    }
    var gsSDKScript = document.createElement('script');
    gsSDKScript.src = 'https://sdk.gopersonal.ai/gs-sdk.js';
    gsSDKScript.onload = initializeGSSDK;
    document.head.appendChild(gsSDKScript);
    </script>

Context Configuration Examples

Depending on the type of page, the context parameter in the script must be adjusted. Here are examples for different page types:

  • Home Page:

    Copy

    <script>
    async function initializeGSSDK() {
        window.gsSDK = await new window.GSSDK.default('REPLACE_ME_CLIENT_ID', {
            provider: 'Custom',
            context: { pageType: 'home' }
        });
    }
    var gsSDKScript = document.createElement('script');
    gsSDKScript.src = 'https://sdk.gopersonal.ai/gs-sdk.js';
    gsSDKScript.onload = initializeGSSDK;
    document.head.appendChild(gsSDKScript);
    </script>
  • Product Detail Page:

    Include the product_id in the context for product detail pages.

    Copy

    <script>
    async function initializeGSSDK() {
        window.gsSDK = await new window.GSSDK.default('REPLACE_ME_CLIENT_ID', {
            provider: 'Custom',
            context: { pageType: 'product_detail', product_id: '123' } // Replace '123' with actual product ID
        });
    }
    var gsSDKScript = document.createElement('script');
    gsSDKScript.src = 'https://sdk.gopersonal.ai/gs-sdk.js';
    gsSDKScript.onload = initializeGSSDK;
    document.head.appendChild(gsSDKScript);
    </script>
  • Cart and Checkout Pages:

    For cart and checkout pages, include the items in the cart within the context.

    Copy

    <script>
    async function initializeGSSDK() {
        var context = { pageType: 'cart', cart_items: [{ product_id: '1', quantity: '1' }] };
        window.gsSDK = await new window.GSSDK.default('REPLACE_ME_CLIENT_ID', {
            provider: 'Custom',
            context: context
        });
    }
    var gsSDKScript = document.createElement('script');
    gsSDKScript.src = 'https://sdk.gopersonal.ai/gs-sdk.js';
    gsSDKScript.onload = initializeGSSDK;
    document.head.appendChild(gsSDKScript);
    </script>

Customer Authentication Management

If a customer is already authenticated, use the following JavaScript to log them in, the flag param_updateCartFromCustomer copies the cart from previous session into the new one

  • Add User Email: If an email address is available, it can be included in the login information.

Copy

window.gsSDK.login('customer_id', {email: 'email@company.com', param_updateCartFromCustomer: true});
  • Logout:

    Copy

    window.gsSDK.logout();

Adding Interactions

Tracking user interactions with products is crucial for personalization. Below are the methods to record various types of interactions.

Viewing a Product

When a user views a product, record the interaction as follows, replacing productId with the actual product ID.

Copy

window.gsSDK.addInteraction({
  "event": "view",
  "item": 'productId'
});

Liking a Product

To record when a user likes a product, use the following code snippet:

Copy

window.gsSDK.addInteraction({
  "event": "like",
  "item": 'productId'
});

Adding a Product to the Cart

When a product is added to the cart, record the interaction with details such as quantity and price:

Copy

window.gsSDK.addInteraction({
  "event": "cart",
  "item": productId,
  "quantity": 1,
  "price": 100
});

Removing a Product from the Cart

To record when a product is removed from the cart, use:

Copy

window.gsSDK.addInteraction({
  "event": "remove-cart",
  "item": productId,
  "quantity": 1,
  "price": 100
});

Handling Quantity Changes in the Cart

It's crucial to update interactions when the quantity of a product in the cart changes. Use the following logic to determine whether to record an add or remove interaction based on the new and old quantities:

Copy

const oldQuantity;
const newQuantity;

if (newQuantity > oldQuantity){
  window.gsSDK.addInteraction({
    "event": "cart",
    "item": productId,
    "quantity": newQuantity - oldQuantity,
    "price": 100
  });
} else {
  window.gsSDK.addInteraction({
    "event": "remove-cart",
    "item": productId,
    "quantity": oldQuantity - newQuantity,
    "price": 100
  });
}

Clearing the Cart

For e-commerce platforms that allow users to clear the cart, record the interaction as follows:

Copy

window.gsSDK.addInteraction({
  "event": "clean-cart"
});

Completing a Purchase

Once a purchase is completed, record the state of the cart. If the transaction ID is known, include it as shown:

Copy

window.gsSDK.addInteractionState('cart');

// If transaction ID is known
window.gsSDK.addInteractionState('cart', { "transactionId": "1"});
PreviousAPI Credentials: Setup Guide for Gopersonal IntegrationNextChannels Setup

Last updated 8 months ago