Skip to content

Commit ec01da0

Browse files
metmarkosaricmetmarkosaric
authored
Update shopify-integration-deprecated.md
1 parent cdeb1a4 commit ec01da0

File tree

1 file changed

+2
-193
lines changed

1 file changed

+2
-193
lines changed

‎docs/shopify-integration-deprecated.md‎

Lines changed: 2 additions & 193 deletions
Original file line numberDiff line numberDiff line change
@@ -1,198 +1,7 @@
11
---
2-
title: Adding Plausible to Shopify (and tracking checkouts and order confirmations)
2+
title: Adding Plausible to Shopify
33
---
44

55
import useBaseUrl from '@docusaurus/useBaseUrl';
66

7-
:::caution
8-
You're viewing the legacy version of this document. Several instructions here will not work after August 28, 2025. Please see the new instructions **[here](shopify-integration.md)**.
9-
:::
10-
11-
Here's how to add Plausible Analytics to your Shopify store and set up the tracking of events such as button clicks, form submissions, order confirmations and revenue attribution.
12-
13-
* Log in to your Shopify account and click on Sales Channels > Online Store > Themes in the left-hand side menu.
14-
15-
* Click on the hamburger menu icon next to your current theme and choose "Edit code" from the drop-down menu.
16-
17-
<img alt="Add Plausible to Shopify" src={useBaseUrl('img/add-custom-code-to-shopify.png')} />
18-
19-
* In the "Layout" folder, select your "theme.liquid" file and [paste your Plausible snippet](https://plausible.io/docs/plausible-script) in the "**Head Code**" section. We display your snippet during the process of adding a new site to your account. You can also see the snippet within the "**Site Installation**" area of the "**General**" section in your [site settings](website-settings.md).
20-
21-
<img alt="Add Plausible Analytics script to Shopify" src={useBaseUrl('img/add-plausible-script-to-shopify.png')} />
22-
23-
* Do click on the "**Save Changes**" to publish your changes.
24-
25-
Now you can go to your Shopify website and verify that Plausible script has been added and to your Plausible account to see whether the stats are being tracked. See here [how to verify the integration](troubleshoot-integration.md).
26-
27-
## How to track checkouts and order confirmations
28-
29-
To track your overall checkouts and order confirmations, you will have to add your tracking script to the "checkout.liquid" file if you're on Shopify Plus.
30-
31-
If you're not a Shopify Plus merchant, you can go to "Settings" and "Checkout and accounts". You can add the Plausible script in the "Additional scripts" text field of the "Order status page" section.
32-
33-
<img alt="Track orders in shopify" src={useBaseUrl('img/order-status-page-shopify.png')} />
34-
35-
After doing that, you will start seeing pageviews for page paths that include "/checkouts/" and "/thank_you" in the "**Top Pages**" report of your Plausible Analytics dashboard. You can group all visits to checkout pages (or all order confirmations) into one set of pages in your Plausible dashboard to better analyze your marketing campaigns and performance.
36-
37-
Click on the "**Filter**" button on the top right of your dashboard and then choose "**Page**". Here you can combine URLs to analyze them as one group. Filter by "**contains**" `thank_you` to combine all the purchase confirmations or by "**contains**" `checkouts` to group all the checkouts.
38-
39-
Doing this will segment your dashboard by the traffic that went through the checkout process and successfully placed orders. You'll be able to see the referral sources and landing pages that drove the most conversions. You'll also be able to see the location and device details of the buyers too.
40-
41-
If you'd like to see these grouped order confirmations or checkout page visits permanently in your dashboard, you can add them as [pageview goals](pageview-goals.md).
42-
43-
<img alt="Shopify thank you page tracking" src={useBaseUrl('img/shopify-thank-you-page-goal.png')} />
44-
45-
## How to track ecommerce revenue and attribution
46-
47-
You can [track sales revenue](ecommerce-revenue-tracking.md) by making a few changes to the order status page:
48-
49-
1. Go to your Shopify admin page
50-
2. Click on Settings > Checkout > Order status page
51-
52-
<img alt="Shopify Settings" src={useBaseUrl('img/shopify-settings-revenue-metrics.png')} />
53-
<img alt="Shopify Checkout menu" src={useBaseUrl('img/shopify-settings-checkout-revenue-metrics.png')} />
54-
55-
3. Add the following code to 'Additional scripts'. Don't forget to replace `yourdomain.com` and `Purchase` with the goal name you created
56-
57-
```liquid
58-
{% if first_time_accessed == true and post_purchase_page_accessed == false %}
59-
<script data-domain="yourdomain.com" src="https://plausible.io/js/script.manual.revenue.js"></script>
60-
<script>
61-
const amount = "{{ total_price | money_without_currency | replace:',','.' }}"
62-
const currency = "{{ currency }}"
63-
window.plausible("Purchase", {revenue: {amount: amount, currency: currency}})
64-
</script>
65-
{% endif %}
66-
```
67-
68-
You're now getting events on Plausible when a customer completes an order in your Shopify store.
69-
70-
If you want to track custom properties, such as order IDs or the number of items in an order, here's an example to get you started. Don't forget to add the custom properties `orderId` and `itemCount` in the Plausible UI, as well.
71-
72-
```
73-
{% if first_time_accessed == true and post_purchase_page_accessed == false %}
74-
<script data-domain="yourdomain.com" src="https://plausible.io/js/script.manual.revenue.pageview-props.js"></script>
75-
<script>
76-
const amount = "{{ total_price | money_without_currency | replace:',','.' }}"
77-
const currency = "{{ currency }}"
78-
79-
const orderId = "{{ order_number }}"
80-
const itemCount = {{ item_count }}
81-
82-
window.plausible("Purchase", {
83-
revenue: {amount: amount, currency: currency},
84-
props: {orderId: orderId, itemCount: itemCount}
85-
})
86-
</script>
87-
{% endif %}
88-
```
89-
90-
<img alt="Shopify Additional scripts box" src={useBaseUrl('img/shopify-additional-scripts-revenue-metrics.png')} />
91-
92-
5. Click 'Save' and you're done!
93-
94-
Learn more [about custom properties here](/custom-props/introduction.md).
95-
96-
## How to track form submissions and button clicks on Shopify
97-
98-
Here's how you can track particular form submissions and button clicks on your Shopify site:
99-
100-
### 1. Enable "Custom events" for your site
101-
102-
You can enable "**Custom events**" as an optional measurement when adding a new site to your Plausible account. If the site has already been added to your account, you can control what data is collected in the "**Site Installation**" area of the "**General**" section in your [site settings](website-settings.md).
103-
104-
### 2. Change the snippet on your site
105-
106-
The tracking snippet changes depending on your selection of optional measurements. When making changes to your optional measurements, do ensure to insert the newest snippet into your site for all tracking to work as expected.
107-
108-
### 3. Find the ID attribute of the form or button you want to track
109-
110-
Your form or button element should have an ID attribute assigned by default. You can find this ID by selecting the element you want to track (do make sure you select your form element and not just the "Submit" button) and clicking on the settings gear.
111-
112-
<img alt="Shopify form ID" src={useBaseUrl('img/shopify-form-id.png')} />
113-
114-
### 4. Trigger custom events with JavaScript on your site
115-
116-
Here's the code you will need to insert in the `<head>` section of the page where the element ID that you want to track is located. You can do this the same way as you've inserted the Plausible snippet into your site.
117-
118-
Make sure to change the `elementId` line in the code below to include the ID attribute of the element you want to track (`ContactForm` in our example).
119-
120-
Also do change the `classes` line to include the goal name in this format: `plausible-event-name=Goal+Name`. The goal name is completely up to you. It's the name under which the goal conversions will appear in your Plausible dashboard. We've used `Form+Submit` goal name in our example.
121-
122-
:::note
123-
To represent a space character in goal names, you can use a `+` sign. For example: `plausible-event-name=Form+Submit` will display as `Form Submit` in your Plausible dashboard
124-
:::
125-
126-
```html
127-
<script>
128-
var toTag = [
129-
{
130-
elementId: 'ContactForm',
131-
classes: 'plausible-event-name=Form+Submit'
132-
}
133-
]
134-
135-
document.addEventListener('DOMContentLoaded', function (_e) {
136-
toTag.forEach(function (tagObject) {
137-
var element = document.getElementById(tagObject.elementId)
138-
tagObject.classes.split(' ').forEach(function (className) {
139-
if (element) { element.classList.add(className) }
140-
})
141-
})
142-
})
143-
</script>
144-
```
145-
146-
<img alt="Modify Plausible script webflow" src={useBaseUrl('img/modify-plausible-script-shopify.png')} />
147-
148-
Do click on the "**Save**" button to save your changes.
149-
150-
### 5. Create a custom event goal in your Plausible account
151-
152-
When you send custom events to Plausible, they won't show up in your dashboard automatically. You'll have to configure the goal for the conversion numbers to show up.
153-
154-
To configure a goal, go to [your website's settings](website-settings.md) in your Plausible account and visit the "**Goals**" section. You should see an empty list with a prompt to add a goal.
155-
156-
<img alt="Add your first Shopify goal" src={useBaseUrl('img/add-goal-shopify.png')} />
157-
158-
Click on the "**+ Add goal**" button to go to the goal creation form. Select `Custom event` as the goal trigger and enter the name of the custom event you are triggering. The name must be an exact match to the one you added to your site for the conversions to show up in your dashboard.
159-
160-
So in our example where we added a goal name `plausible-event-name=Form+Submit` to the Shopify site, the goal to add in the Plausible account is `Form Submit` (plus is replaced by a space).
161-
162-
<img alt="Add your custom event goal" src={useBaseUrl('img/form-submission-custom-event-goal-shopify.png')} />
163-
164-
Next, click on the "**Add goal**" button and you'll be taken back to the Goals page.
165-
166-
### 6. Your goal should now be ready and tracking
167-
168-
Your goal should now be set up. When you navigate back to your Plausible Analytics dashboard, you should see the number of visitors who triggered the custom event. Goal conversions are listed at the very bottom of the dashboard. The goal will show up in your dashboard as soon as it has been completed at least once.
169-
170-
### How to trigger multiple custom events on the same page
171-
172-
If you want to trigger multiple custom events on the same site, you don't need to add the script for each element that you want to track. Simply add all the elements in the same code. Make sure to **only add** the elements that already exist on your site. For example, if you want to track a form and a button, the code will look like this:
173-
174-
```html
175-
<script>
176-
var toTag = [
177-
{
178-
elementId: 'ContactForm',
179-
classes: 'plausible-event-name=Form+Submit'
180-
},
181-
{
182-
elementId: 'button-ID',
183-
classes: 'plausible-event-name=Button+Click'
184-
}
185-
]
186-
187-
document.addEventListener('DOMContentLoaded', function (_e) {
188-
toTag.forEach(function (tagObject) {
189-
var element = document.getElementById(tagObject.elementId)
190-
tagObject.classes.split(' ').forEach(function (className) {
191-
if (element) { element.classList.add(className) }
192-
})
193-
})
194-
})
195-
</script>
196-
```
197-
198-
<img alt="track multiple elements in Shopify" src={useBaseUrl('img/track-multiple-elements-shopify.png')} />
7+
Please see our updated [instructions on integrating Plausible Analytics with your Shopify store](shopify-integration.md).

0 commit comments

Comments
 (0)