.png%3Falt%3Dmedia%26token%3D51e54553-5d14-4359-9237-a83a5ea196a8)
.png%3Falt%3Dmedia%26token%3D51e54553-5d14-4359-9237-a83a5ea196a8)
Shopify Integration
This page will give you detailed steps to integrate Growlytics on your shopify website.
- 1.Login to https://app.growlytics.in.
- 2.On top right corner, click on Integrations > Shopify Integration. You will be redirected to shopify integration page.
3. On shopify integration page, enter name of your shop <shop>.myshopify.com and click on in Integrate Shopify Button.
4. You will be redirected to your shopify admin dashboard, and will be asked to install Growlytics app on shopify. Click on Intall App to continue. After you click on Install App button, you will be redirected to growlytics with integration success message.
After first step, you will need to add scripts in 3 different liquid template files:
theme.liquid, product.liquidand collection-template.liquid.- 1.Add the code below at the end of
theme.liquidtemplate file. This will allow Growlytics to analyze visitor's behaviour on your site:
<!-- theme.liquid - Add this script at the end of theme.liquid file -->
<script type="text/javascript" src="https://static.growlytics.in/growlytics.min.js"></script>
<script>
let grwSyncInfo = {
page: '{{request.page_type}}',
cart: {{cart | json}},
product: window.GrowlyticsInfo ? window.GrowlyticsInfo.shopifyProduct: null,
collection: window.GrowlyticsInfo ? window.GrowlyticsInfo.shopifyCollection: null,
};
{% if customer %}
grwSyncInfo.customer = {
id: '{{ customer.id }}',
info: {
'name': '{{ customer.name }}' ? '{{customer.name}}' : null,
'email': '{{ customer.email }}' ? '{{customer.email}}' : null,
'mobile': '{{ customer.phone }}' ? '{{customer.phone}}' : null,
'firstName': '{{ customer.first_name }}' ? '{{customer.first_name}}' : null,
'lastName': '{{ customer.last_name }}' ? '{{customer.last_name}}' : null,
'totalOrders': {{ customer.orders_count }},
'lastOrder': '{{ customer.last_order }}' ? '{{ customer.last_order }}' : null,
'totalSpent': {{customer.total_spent }},
'addressList': {{customer.addresses | json}}
}
};
{% endif %}
Growlytics.shopify.sync(grwSyncInfo);
Growlytics.initialize({
apiKey: '<API-KEY>',
enabled: true,
shopify: true,
shopifyStore: '<store-name-goes-here>',
webPushEnabled: true, // Enable/disable push notifs
serviceWorkerFile: '<service-worker-file-location-goes-here>',
autoRequestWebPushPermission: true
});
</script>
- 1.Make sure you are replacing <api-key> with your actual project api key. You can find api-key in project settings.
- 2.Make sure you are replacing <store-name> with your shopify store name.
- 3.Make sure you are replacing the <service-worker-file-location> with your store's server location.
3. Add the code below at the end of
product.liquid template file. This will allow Growlytics to track products viewed by visitors.<!-- product.liquid - Add this script at the end of product.liquid file -->
<script>
{%if product %}
let prodInfo = {{ product | json }};
prodInfo.url = "{{ shop.secure_url }}{{ product.url }}";
prodInfo.price = {{product.price}}/100;
prodInfo.imageUrl = "https:{{ product.featured_image.src|img_url:'grande' }}";
if(window.Growlytics){
window.Growlytics.shopify.productViewed(prodInfo);
}else{
if(!window.GrowlyticsInfo) window.GrowlyticsInfo = {};
window.GrowlyticsInfo.shopifyProduct = prodInfo;
}
{% endif %}
</script>
4. . Add the code below at the end of
collection-template.liquid template file. This will allow Growlytics to track collections viewed by visitors.<!-- collection-template.liquid - Add this script at the end of collection-template.liquid file -->
<script>
{%if collection %}
if(window.Growlytics){
window.Growlytics.shopify.collectionViewed({{collection|json}});
}else{
if(!window.GrowlyticsInfo) window.GrowlyticsInfo = {};
window.GrowlyticsInfo.shopifyCollection = {{collection|json}};
}
{% endif %}
</script>
Last modified 2yr ago