Adding VitalWall Cart Tracking to Your E-commerce Store

Track Cart Activity in Real-Time

Want to see what products your customers are interested in right now? VitalWall makes it easy to add real-time cart tracking to your e-commerce store. Each time a customer adds an item to their cart, you'll see it instantly in your dashboard.

This simple integration helps you:

• See which products are trending right now
• Track customer interest throughout the day
• Identify popular products in real-time
• Make data-driven inventory decisions

Setting Up Your Own Wall

The implementation involves two parts:

1. Setting up your wall on VitalWall.com
2. Adding tracking code to your website

Part 1: Setup on VitalWall.com

1. Log in to VitalWall.com
2. Click "New Wall"
3. Name it (e.g., "My Store Cart Traffic")
4. Add your domain(s) to allowed domains
5. Save your wall

Part 2: Implementation on Your Website

Add this code to your website, just before the closing </body> tag:

<script type="module">
  const { default: VitalWall } = await import('https://unpkg.com/@vitalwall/client@latest/dist/index.esm.js');

  VitalWall.init({
    wallId: 'your-wall-id',
    apiKey: 'your-api-key',
    debug: false
  });
</script>

For each product, add these attributes to your "Add to Cart" button:

<button data-vital-item="add-to-cart" data-vital-html="true" data-vital-send-content="product-123">Add to Cart</button>

<div id="product-123" style="display: none;">
  <div class="wall-card">
    <img src="/product-image.jpg" alt="Product Name" />
    <div class="details">
      <div class="name">Product Name</div>
      <div class="price">$99.99</div>
    </div>
  </div>
</div>

Best Practices

1. Keep Wall Content Simple - Use minimal HTML, optimize images, use unique IDs
2. Testing & Debugging - Enable debug mode while testing, check console messages
3. Performance - Add the script at the end of your body tag, lazy load images