You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/custom-event-goals.md
+11-25Lines changed: 11 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,38 +8,30 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
8
8
If you use the custom events feature, then these count towards your billable monthly pageviews.
9
9
:::
10
10
11
-
Custom events allow you to measure button clicks, purchases, subscription signups, form completions and pretty much any other action that you wish your visitors to take.
11
+
Custom events let you measure button clicks, subscription signups, or any other action you want visitors to take. A manual setup is required to get started. See the instructions below.
12
12
13
-
:::tip Using WordPress?
14
-
The quickest way to start tracking custom events is to use our [official WordPress plugin](https://plausible.io/wordpress-analytics-plugin)
13
+
We also offer several easy goal options that don’t require any changes to your website’s code. Check out automated goal tracking for [external link clicks](outbound-link-click-tracking.md), [form submissions](form-submissions-tracking.md), [file downloads](file-downloads-tracking.md), and [404 error pages](error-pages-tracking-404.md). You can also use [pageview goals](pageview-goals.md) to track the "thank you" page or order confirmation page.
14
+
15
+
:::tip Using WordPress or Google Tag Manager?
16
+
The quickest way to start tracking custom events is with our [WordPress plugin](https://plausible.io/wordpress-analytics-plugin) or our [Google Tag Manager template](https://plausible.io/gtm-template).
15
17
:::
16
18
17
19
## Add a CSS class name to the element you want to track on your site
18
20
19
-
:::tip Use pageview goals to track the "thank you" page or the order confirmation page
20
-
As an alternative to custom events, check out the [pageview goals](pageview-goals.md). Since pageviews are collected automatically, you don’t need to change your website’s code to measure pageview goals. This makes pageview goals the easiest way to start tracking any type of conversions.
21
-
:::
22
-
23
21
Tag the site element you want to track with a CSS class name. How to do this varies depending on the site builder, CMS or framework you've used to build your site.
24
22
25
-
For instance, if you're using WordPress, you can click on any block element you want to track such as a button or a form. This will open up the block menu on the right-hand side of your screen.
23
+
For instance, if you're using WordPress, you can click on any block element you want to track such as a button. This will open up the block menu on the right-hand side of your screen.
26
24
27
-
<img alt="Click on any WordPress block element you want to track such as a button or a form" src={useBaseUrl('img/wordpress-button-css-class-name.png')} />
25
+
<img alt="Click on any WordPress block element you want to track such as a button" src={useBaseUrl('img/wordpress-button-css-class-name.png')} />
28
26
29
-
You can then click on "Advanced" and add a CSS class name in the "Additional CSS class(es)" field. Add the CSS class name in this format: `plausible-event-name=MyEventName`. For instance, if you want to track form submissions on your contact form, you could use: `plausible-event-name=Form+Submit`.
27
+
You can then click on "Advanced" and add a CSS class name in the "Additional CSS class(es)" field. Add the CSS class name in this format: `plausible-event-name=MyEventName`. For instance, if you want to track clicks on a button, you could use: `plausible-event-name=Button+Click`.
30
28
31
29
:::tip To represent a space character in the event names, you can use a `+` sign
32
-
For example: `plausible-event-name=Form+Submit` will display as `Form Submit` in your dashboard
30
+
For example: `plausible-event-name=Button+Click` will display as `Button Click` in your dashboard
33
31
:::
34
32
35
33
<img alt="Add a CSS class name in the 'Additional CSS class(es)' field" src={useBaseUrl('img/wordpress-css-class-name.png')} />
36
34
37
-
When tracking form submits this way, we recommend tagging the `<form>` element itself with the `plausible-event-name=...` class (not the `input` or `button` element inside the form).
38
-
39
-
:::tip Some CMSs (like Webflow) do not support an equals sign (`=`) in the classnames
40
-
If that's the case, use a double dash (`--`) instead of the equals sign. For example: `plausible-event-name--signup`
41
-
:::
42
-
43
35
### You can also add class names directly in HTML
44
36
45
37
If you can edit the raw HTML code of the element you want to track, you can also add the classes directly in HTML. For example:
@@ -68,12 +60,7 @@ After adding the class, please go back to your site, and verify that the class a
68
60
69
61
In some cases, the tracking classes might be added to a wrapper `<div>` element (parent to the element you want to track), but don't worry, Plausible will still be able to track clicks on the child element if its parent has the necessary classes.
70
62
71
-
Some CMSs like Webflow do not support an equals sign (`=`) in the classnames. If you add a class attribute with the value `plausible-event-name=Signup`, but when you go back to your page and inspect the element, it might have `class="plausible-event-name-Signup"` (equals sign replaced with a hyphen).
72
-
If that's the case, use a double dash (`--`) instead of the equals sign. For example: `plausible-event-name--signup`.
73
-
74
-
:::tip Tracking form submissions may not work with forms that contain an element with `id="submit"` or `name="submit"`
75
-
To work around this limitation please rename the `id` or `name` attribute value to something else. If you're unable to do that, please look into [implementing custom events manually with JavaScript](#trigger-custom-events-manually-with-a-javascript-function)
76
-
:::
63
+
Some CMSs like Webflow do not support an equals sign (`=`) in the classnames. If you add a class attribute with the value `plausible-event-name=Signup`, but when you go back to your page and inspect the element, it might have `class="plausible-event-name-Signup"` (equals sign replaced with a hyphen). If that's the case, use a double dash (`--`) instead of the equals sign. For example: `plausible-event-name--signup`.
77
64
78
65
If your CMS does not support adding CSS classes, please expand the following section of instructions.
79
66
@@ -177,7 +164,7 @@ To configure a goal, go to [your website's settings](website-settings.md) in you
177
164
178
165
Click on the "**+ Add goal**" button to go to the goal creation form.
179
166
180
-
Select `Custom event` as the goal trigger and enter the name of the custom event you are triggering. The name must match the one you added as a CSS class name on your site for conversions to appear in your analytics dashboard. So in our example where you added a CSS class name `plausible-event-name=Form+Submit`, the goal to add to your Plausible account is `Form Submit` (plus is replaced by a space).
167
+
Select `Custom event` as the goal trigger and enter the name of the custom event you are triggering. The name must match the one you added as a CSS class name on your site for conversions to appear in your analytics dashboard. So in our example where you added a CSS class name `plausible-event-name=Button+Click`, the goal to add to your Plausible account is `Button Click` (plus is replaced by a space).
181
168
182
169
<img alt="Add your custom event goal" src={useBaseUrl('img/add-custom-event-goal.png')} />
183
170
@@ -235,7 +222,6 @@ plausible.init({
235
222
})
236
223
```
237
224
238
-
239
225
### Monetary values to track ecommerce revenue
240
226
241
227
You can also send dynamic monetary values alongside custom events to track revenue attribution. Here's how to set up the [ecommerce revenue tracking](ecommerce-revenue-tracking.md).
0 commit comments