OurPcGeek
Posts
Playbook: Implementing Adobe Analytics on Shopify using Web SDK

Playbook: Implementing Adobe Analytics on Shopify using Web SDK

Implementing Adobe Analytics on Shopify using Web SDK

December 01, 2024

Step-by-step playbook for implementing Adobe Analytics using Web SDK on a Shopify eCommerce website. This guide is designed for freshers, making it easy to follow and implement.

Playbook: Implementing Adobe Analytics on Shopify using Web SDK

1. Overview

This playbook will help you integrate Adobe Analytics with your Shopify store using Adobe Experience Platform Web SDK (AEP Web SDK).

📌 Key Objectives:
✅ Send page views, events, and eCommerce interactions to Adobe Analytics.
✅ Track user interactions like product views, cart additions, and purchases.
✅ Ensure compliance with data privacy laws (GDPR, CCPA).

2. Prerequisites

Before starting, ensure you have the following:
🔹 Access to Adobe Experience Platform Data Collection (Tag Manager)
🔹 Adobe Experience Platform Edge Configuration
🔹 Adobe Analytics Report Suite
🔹 Shopify Admin Access

3. Step-by-Step Implementation

Step 1: Load Adobe Web SDK on Shopify

1️⃣ Go to Shopify Admin Panel → Click Online Store → Themes
2️⃣ Click Actions → Edit Code
3️⃣ Open theme.liquid (Main Shopify Template)
4️⃣ Add the Web SDK script inside <head>:

<script>
  (function(w,d,t,s,u) {
    var f=d.getElementsByTagName(t)[0],j=d.createElement(t);
    j.async=true;j.src=s;f.parentNode.insertBefore(j,f);
    w[u]=w[u]||function(){(w[u].q=w[u].q||[]).push(arguments)};
  })(window,document,'script','https://cdn.adobe.io/web-sdk.min.js','alloy');
  
  alloy("configure", {
    edgeConfigId: "YOUR_EDGE_CONFIG_ID",
    orgId: "YOUR_ORG_ID",
    defaultConsent: { general: "pending" }
  });
</script>

📌 Replace "YOUR_EDGE_CONFIG_ID" and "YOUR_ORG_ID" with values from Adobe Data Collection UI.

Step 2: Sending Page Views to Adobe Analytics

1️⃣ Modify theme.liquid inside <script>:

<script>
  alloy("sendEvent", {
    "xdm": {
      "web": { "webPageDetails": { "URL": window.location.href } },
      "eventType": "web.webinteraction.pageview",
      "timestamp": new Date().toISOString()
    }
  });
</script>

✅ This will send a Page View event to Adobe Analytics.

Step 3: Track Product Views

📌 File to Edit: product.liquid
📌 When Triggered: When a user visits a product page

1️⃣ Add this inside <script> in product.liquid:

<script>
  alloy("sendEvent", {
    "xdm": {
      "commerce": {
        "productViews": {
          "value": 1
        },
        "products": [{
          "SKU": "{{ product.variants.first.sku }}",
          "name": "{{ product.title }}",
          "priceTotal": {{ product.price | money_without_currency }}
        }]
      },
      "eventType": "commerce.productViews",
      "timestamp": new Date().toISOString()
    }
  });
</script>

✅ This will track product views in Adobe Analytics.

Step 4: Track Add to Cart

📌 File to Edit: product.liquid
📌 When Triggered: When user clicks Add to Cart

1️⃣ Locate Shopify’s Add to Cart button:

<form method="post" action="/cart/add">

2️⃣ Add an onclick event:

<button type="submit" onclick="trackAddToCart()">Add to Cart</button>

3️⃣ Add this function inside <script> in product.liquid:

<script>
  function trackAddToCart() {
    alloy("sendEvent", {
      "xdm": {
        "commerce": {
          "cartAdditions": {
            "value": 1
          },
          "products": [{
            "SKU": "{{ product.variants.first.sku }}",
            "name": "{{ product.title }}",
            "priceTotal": {{ product.price | money_without_currency }}
          }]
        },
        "eventType": "commerce.cartAdditions",
        "timestamp": new Date().toISOString()
      }
    });
  }
</script>

✅ This will track Add to Cart interactions.

Step 5: Track Purchases

📌 File to Edit: checkout.liquid (Only available on Shopify Plus)
📌 Alternative: Use Shopify’s Order Confirmation Page

1️⃣ Edit checkout.liquid or Thank You Page (checkout/order.liquid)

2️⃣ Add this inside <script>:

<script>
  alloy("sendEvent", {
    "xdm": {
      "commerce": {
        "orders": {
          "value": 1
        },
        "transactionID": "{{ order.id }}",
        "currencyCode": "{{ order.currency }}",
        "purchaseID": "{{ order.order_number }}",
        "purchaseTotal": {{ order.total_price | money_without_currency }},
        "products": [{% for line_item in order.line_items %}
          {
            "SKU": "{{ line_item.sku }}",
            "name": "{{ line_item.title }}",
            "quantity": {{ line_item.quantity }},
            "priceTotal": {{ line_item.price | money_without_currency }}
          }{% if forloop.last == false %},{% endif %}
        {% endfor %}]
      },
      "eventType": "commerce.purchases",
      "timestamp": new Date().toISOString()
    }
  });
</script>

✅ This will track Purchases in Adobe Analytics.

4. Testing & Debugging

1️⃣ Use Browser Console:

Open Chrome DevTools (F12 or Cmd + Option + I)
Run:
```
alloy("sendEvent", { "xdm": { "eventType": "test.event" }});
```
🔹 Check Network Tab → Look for Edge Network Calls

2️⃣ Use Adobe Experience Platform Debugger

Install Chrome Extension: AEP Debugger
Verify events in Adobe Analytics Real-Time Reports

5. Additional Enhancements

✅ Implement Consent Management (GDPR/CCPA)

<script>
  function grantConsent() {
    alloy("setConsent", { "consent": { "general": "in" }});
  }
</script>
<button onclick="grantConsent()">Accept Cookies</button>

✅ Track Checkout Steps (cart.liquid, checkout.liquid)

<script>
  alloy("sendEvent", {
    "xdm": { "eventType": "commerce.checkoutStep", "step": 1 }
  });
</script>

6. Conclusion

🎯 You Have Successfully Implemented Adobe Analytics on Shopify Using Web SDK! 🚀
🔹 Tracked Page Views, Product Views, Add to Cart, and Purchases
🔹 Ensured GDPR/CCPA Compliance
🔹 Verified Data in Adobe Analytics

Reply

or to participate.