Integrating Adobe Analytics with Shopify via the Web SDK
Sunit Sharma
Adobe Analytics & Launch Architect | AEP Qualified Expert | Adobe Certified Expert - Developer & Business Practitioner | Analytics Enthusiast & Adobe Analytics/Adobe Launch Trainer | Analytics Speaker
Overview
This article will guide you through integrating Adobe Analytics with your Shopify store using the Adobe Experience Platform Web SDK (AEP Web SDK).
Key Objectives:
Prerequisites
Before starting, ensure you have the following: ?
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 - Liquid is an open-source template language created by Shopify)
theme.liquid is a key file in Shopify themes that contains the main structure and layout of your online store.
This file typically includes:
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 the corresponding values from the Adobe Data Collection UI.
Step 2: Sending Page Views to Adobe Analytics
Modify theme.liquid inside <script>:
<script>
alloy("sendEvent", {
"xdm": {
"web": {
"webPageDetails": {
"URL": window.location.href // Captures the current page URL
}
},
"eventType": "web.webinteraction.pageview", // Specifies this is a pageview event
"timestamp": new Date().toISOString() // Captures the current timestamp in ISO format
}
});
</script>
The above is using Adobe Experience Platform (AEP) Web SDK to send a page view event to Adobe Analytics.
Explanation:
Purpose:
This script sends a page view event to Adobe Analytics with the URL of the page and the timestamp of when the event was triggered. It's typically used to track page visits or interactions on your website.
Step 3: Track Product Views
File required to Edit: product.liquid
product.liquid is a template file in a Shopify theme that is responsible for rendering the individual product pages. This file is part of the Shopify Liquid templating language and is used to display product details such as title, description, images, pricing, and other attributes on a product page.
Key Elements in product.liquid:
Here’s an overview of what you might find in a typical product.liquid file:
When Triggered: When a user visits a product page
Add this inside <script> in product.liquid:
<script>
alloy("sendEvent", {
"xdm": {
"commerce": {
"productViews": {
"value": 1 // This indicates a product view event is triggered
},
"products": [{
"SKU": "{{ product.variants.first.sku }}", // The SKU of the first product variant
"name": "{{ product.title }}", // The product title
"priceTotal": {{ product.price | money_without_currency }} // The price of the product without currency symbol
}]
},
"eventType": "commerce.productViews", // Specifies that this is a product view event
"timestamp": new Date().toISOString() // Captures the current timestamp in ISO format
}
});
</script>
The script will be using Adobe Experience Platform (AEP) Web SDK to send a product view event to Adobe Analytics when a user views a product page. This is useful for tracking user interactions with individual products, such as which products are being viewed, their price, and SKU.
Explanation of the Code:
Step 4: Track Add to Cart
File required to Edit: product.liquid
When Triggered: When user clicks Add to Cart
<form method="post" action="/cart/add">
The <form method="post" action="/cart/add"> is used in Shopify to add a product to the shopping cart. It is part of Shopify's default structure for creating a form that allows users to add products directly to their cart from a product page.
领英推荐
<button type="submit" onclick="trackAddToCart()">Add to Cart</button>
This ensures that every time the user adds a product to their cart, the event is logged in Adobe Analytics, helping you track customer behavior and optimize your store.
<script>
function trackAddToCart() {
alloy("sendEvent", {
"xdm": {
"commerce": {
"cartAdditions": {
"value": 1 // This indicates a cart addition event is triggered
},
"products": [{
"SKU": "{{ product.variants.first.sku }}", // Product SKU (for the first variant)
"name": "{{ product.title }}", // Product title
"priceTotal": {{ product.price | money_without_currency }} // Product price without currency symbol
}]
},
"eventType": "commerce.cartAdditions", // Specifies this is an add to cart event
"timestamp": new Date().toISOString() // Captures the current timestamp in ISO format
}
});
}
</script>
Explanation of Each Part:
Purpose:
This script is designed to track when a user adds a product to their cart by sending a "commerce.cartAdditions" event to Adobe Analytics. The event includes key product details like SKU, name, and price, which can be used for reporting, analysis, and further optimization of the shopping experience.
Step 5: Track Purchases
File required to Edit: checkout.liquid (Only available on Shopify Plus) or Use Shopify’s Order Confirmation Page
checkout.liquid is a template file in Shopify that controls the layout and content of the checkout page. However, it is important to note that Shopify Plus stores are the only ones that can customize the checkout process with the checkout.liquid file. This file allows for deeper customization of the checkout experience, including altering the layout, adding custom scripts, and personalizing the flow of the checkout process.
Key Features of checkout.liquid
Edit checkout.liquid or Thank You Page (checkout/order.liquid)
Add this inside <script>:
<script>
alloy("sendEvent", {
"xdm": {
"commerce": {
"orders": {
"value": 1 // Indicates a purchase event (value: 1 means it's a successful purchase)
},
"transactionID": "{{ order.id }}", // Transaction ID for the order
"currencyCode": "{{ order.currency }}", // Currency code of the transaction (e.g., USD, EUR)
"purchaseID": "{{ order.order_number }}", // The order number (a unique identifier)
"purchaseTotal": {{ order.total_price | money_without_currency }}, // Total purchase amount (without currency symbol)
"products": [{
{% for line_item in order.line_items %} // Loops through each line item in the order
"SKU": "{{ line_item.sku }}", // SKU of the product (unique identifier for the product variant)
"name": "{{ line_item.title }}", // Name of the product
"quantity": {{ line_item.quantity }}, // Quantity of the product purchased
"priceTotal": {{ line_item.price | money_without_currency }} // Price of the product (without currency symbol)
{% if forloop.last == false %},{% endif %}
{% endfor %}
}]
},
"eventType": "commerce.purchases", // Specifies that this is a purchase event
"timestamp": new Date().toISOString() // Timestamp of when the purchase event occurred
}
});
</script>
This script is designed to send a purchase event to Adobe Analytics (via the Adobe Experience Platform Web SDK) when an order is completed in your Shopify store. It tracks essential details about the order, such as the transaction ID, currency, total price, and product details (SKU, name, quantity, and price) for each line item.
Explanation of Key Parts:
Purpose of the Script:
How It Works:
Testing & Debugging
Use Browser Console:
alloy("sendEvent", { "xdm": { "eventType": "test.event" }});
Sending a Test Event: The event is labeled as "test.event", indicating that this might be a test or debugging event. It's useful when you're initially setting up AEP Web SDK to check whether the integration is functioning properly.
Check Network Tab → Look for Edge Network Calls
Use Adobe Experience Platform Debugger:
Additional Enhancements
?Implement Consent Management (GDPR/CCPA)
<script>
function grantConsent() {
alloy("setConsent", { "consent": { "general": "in" }});
}
</script>
<button onclick="grantConsent()">Accept Cookies</button>
Purpose of the Above Script:
Track Checkout Steps (cart.liquid, checkout.liquid)
<script>
alloy("sendEvent", {
"xdm": {
"eventType": "commerce.checkoutStep", // Event type for tracking the checkout step
"step": 1 // The current step in the checkout process (step 1)
}
});
</script>
?This script sends an event to Adobe Experience Platform (AEP) when a user progresses to a specific step in the checkout process on an eCommerce website.
Purpose of the Above Script:
Summary
Successfully Integrated Adobe Analytics with Your Shopify Store Using the Web SDK! ??
?? Tracked Page Views, Product Views, Add to Cart Actions, and Purchases
?? Ensured Compliance with GDPR/CCPA Regulations
?? Verified Data Accuracy in Adobe Analytics