|
2 | 2 | title: Proxying Plausible through CloudFront
|
3 | 3 | ---
|
4 | 4 |
|
5 |
| -import useBaseUrl from '@docusaurus/useBaseUrl'; |
6 |
| - |
7 |
| -You can use CloudFront to proxy your Plausible Analytics requests. Here's the step-by-step process for creating a proxy. |
| 5 | +We've removed old proxying instructions due to being out of date. [See our general proxying guide](/proxy/introduction). |
8 | 6 |
|
9 | 7 | :::tip Don't want to manage your own proxy? We can handle it for you
|
10 | 8 | Our managed proxy lets you send analytics through your own domain name as a first-party connection. All you need to do is set up a CNAME record using the instructions we'll send you and update the snippet on your site. We'll take care of everything else. [Contact us for details](https://plausible.io/contact).
|
11 | 9 | :::
|
12 |
| - |
13 |
| -Step 0: Sign up for a free AWS account if you don't have an account already and create a CloudFront distribution. |
14 |
| - |
15 |
| -## Step 1: Create new origin |
16 |
| - |
17 |
| -You need to create a new origin pointing to the Plausible server. In the CloudFront console, under your distribution, create a new origin by going into the "**Origins**" section and clicking on "**Create origin**". |
18 |
| - |
19 |
| -1. Set "**Origin domain**" to: `plausible.io` |
20 |
| -2. Set the "**Protocol**" policy to: `HTTPS Only` |
21 |
| -3. You do not need to change any of the other options on this screen |
22 |
| -4. Click on the "**Create origin**" button |
23 |
| - |
24 |
| -## Step 2: Create behaviors |
25 |
| - |
26 |
| -Now you need to define two behaviors for when to use the new origin. In the CloudFront console, under your distribution, create a new behavior by going into the "**Behavior**" section and clicking on "**Create behavior**". |
27 |
| - |
28 |
| -Create a behavior for the analytics script: |
29 |
| - |
30 |
| -1. Set the "**Path pattern**" to: `/js/script.js` (you can also use `/js/script.*` to match [script extensions](https://plausible.io/docs/script-extensions)) |
31 |
| -2. In "**Origin and origin groups**", choose the origin that you created in step 1 |
32 |
| -3. Set "**Compress objects automatically**" to: `No` |
33 |
| -4. Set the "**Viewer protocol policy**" to: `HTTPS Only` |
34 |
| -5. Set the "**Allowed HTTP methods**" to: `GET, HEAD` |
35 |
| -6. In "**Cache key and origin requests**", choose "**Legacy cache settings**" |
36 |
| -7. You do not need to change any of the other options on this screen |
37 |
| -8. Click on the "**Create behavior**" button |
38 |
| - |
39 |
| -And create a behavior for the event API: |
40 |
| - |
41 |
| -1. Set the "**Path pattern**" to: `/api/event` |
42 |
| -2. In "**Origin and origin groups**", choose the origin that you created in step 1 |
43 |
| -3. Set "**Compress objects automatically**" to: `No` |
44 |
| -4. Set the "**Viewer protocol policy**" to: `HTTPS Only` |
45 |
| -5. Set the "**Allowed HTTP methods**" to: `GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE` |
46 |
| -6. In "**Cache key and origin requests**", use the "**Cache policy and origin request policy**" |
47 |
| -7. Set the "**Cache policy**" to: `CachingDisabled` |
48 |
| -8. Set the "**Origin request policy**" to: `UserAgentRefererHeaders` |
49 |
| -9. Set the "**Response headers policy**" to: `SimpleCORS` |
50 |
| -10. You do not need to change any of the other options on this screen |
51 |
| -11. Click on the "**Create behavior**" button |
52 |
| - |
53 |
| -## Step 3: Integrate a new snippet into your site header |
54 |
| - |
55 |
| -With the origin and behaviours in place, you can replace your Plausible Analytics script tag in the Header (`<head>`) section of your site with the proxied snippet. This is how the new snippet should look like (make sure to edit it to have the correct domain name of your site): |
56 |
| - |
57 |
| -```html |
58 |
| -<script defer data-domain="yourdomain.com" src="/js/script.js"></script> |
59 |
| -``` |
60 |
| - |
61 |
| -If you're not using the CloudFront with a custom domain, you'll also need to add a `data-api` attribute to tell the script where the data should be sent. This is how the new snippet should look like in that case (do make sure to edit it to the correct URL of your CloudFront distribution) |
62 |
| - |
63 |
| -```html |
64 |
| -<script defer data-domain="yourdomain.com" data-api="https://YOURDISTRIBUTION.cloudfront.net/api/event" src="https://YOURDISTRIBUTION.cloudfront.net/js/script.js"></script> |
65 |
| -``` |
66 |
| - |
67 |
| -Using our extensions such as hash-based routing, revenue or outbound link click tracking? Change the file name from `script.js` to the script you want to use: `script.hash.js`, `script.revenue.js` or `script.outbound-links.js`. Want to use more than one extension? You can chain them like this: `script.hash.revenue.outbound-links.js`. |
68 |
| - |
69 |
| -Deploy these changes to your site. You can verify the proxy is working by opening your network tab. You should see a request to |
70 |
| -`https://yourdomain.com/js/script.js` with status 200 and another one to `https://yourdomain.com/api/event` with status 202. |
71 |
| - |
72 |
| -That's it! You're now counting your website stats using a proxy. |
73 |
| - |
74 |
| -Thanks to [@thomasjsn](https://github.com/thomasjsn) for contributing these instructions! |
0 commit comments