CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="icon" type="image/png" sizes="32x32" href="//static.zgo.at/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="//static.zgo.at/favicon/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="//static.zgo.at/favicon/apple-touch-icon.png"> <link rel="manifest" href="//static.zgo.at/favicon/site.webmanifest"> <link rel="mask-icon" href="//static.zgo.at/favicon/safari-pinned-tab.svg" color="#9a15a4"> <meta name="msapplication-TileColor" content="#9f00a7"> <meta name="theme-color" content="#ffffff"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Documentation – GoatCounter"> <title>GoatCounter documentation</title> <link rel="stylesheet" href="//static.zgo.at/vars.css?v=a6284282"> <style> @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: fallback; src: local('Lato'), local('Lato Regular'), url('//static.zgo.at/fonts/latolatin.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: fallback; src: local('Lato Bold'), local('Lato Bold'), url('//static.zgo.at/fonts/latolatin-bold.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: fallback; src: local('Lato Italic'), local('Lato Italic'), url('//static.zgo.at/fonts/latolatin-italic.woff2') format('woff2'); } </style> <link rel="stylesheet" href="//static.zgo.at/shared.css?v=a6284282"> <link rel="stylesheet" href="//static.zgo.at/style.css?v=a6284282"> <link rel="canonical" href="https://goatcounter.com/help/start"> <style> footer.center { margin-top: 2em; } nav.center { max-width: 80em; padding-left: 19em; } .code-wrap { display: flex; max-width: 80em; } .code-wrap >div { overflow: hidden; padding: 6px; margin: -6px; margin-right: 6px; } .code-nav { flex-shrink: 0; width: 18em; height: 100%; padding: .5em; margin-right: .6em; background-color: var(--nav-bg); color: var(--text); box-shadow: 0 0 4px var(--box-shadow); } .code-nav select { display: none; } .code-nav ul { list-style: none; margin: 0; padding: 0; } .code-nav a { display: block; margin: .3em 0; padding-left: .3em; border-left: 3px solid transparent; } .code-nav li >ul a { margin-left: .5em; } .code-nav .active a { border-left-color: #999; } .code-nav strong { font-size: .9rem; } .page-code { padding: 1em; background-color: var(--bg); box-shadow: 0 0 6px rgba(0,0,0,.2); } h3 { margin-bottom: .2em; } h3 + p { margin-top: 0; } h4 { margin-bottom: .2em; } h4 + p { margin-top: 0; } hr { margin: 0; } .pre-copy-wrap { position: relative; } .pre-copy { position: absolute; right: 0; top: calc(-2em - 1px); padding: .3em 1em; color: #000; background-color: #f5f5f5; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; } #vc-example { display: flex; justify-content: space-around; flex-wrap: wrap; text-align: center; } #vc-example >* { width: 200px; } @media (min-height: 46rem) { .code-nav { position: sticky; top: 0; } } @media (max-width: 50rem) { nav.center { padding-left: 1em; } .code-wrap { flex-direction: column; padding: 0; } .code-wrap >div { margin: 0; padding: 0; } .code-nav { position: sticky; top: 0; z-index: 10; width: auto; margin-bottom: 1em; } .code-nav ul { display: none; } .code-nav select { display: block; width: 100%; } } </style> </head> <body> <nav class="center"> <strong id="back"><a href="/">←︎ Home</a></strong> </nav> <div class="center code-wrap"> <nav class="code-nav"> <select><optgroup label="Basics"><option selected value="start">Getting started</option><option value="visitor-counter">Visitor counter</option><option value="events">Events</option><option value="csp">Content-Security-Policy</option><option value="js">JavaScript API</option></optgroup><optgroup label="Other ways to get data in GoatCounter"><option value="pixel">Tracking pixel</option><option value="logfile">Server logfiles</option><option value="backend">From app backend or other sources</option></optgroup><optgroup label="How can I…"><option value="skip-dev">Prevent tracking my own pageviews?</option><option value="skip-path">Prevent tracking specific paths?</option><option value="path">Control the path that's sent to GoatCounter?</option><option value="modify">Change data before it's sent to GoatCounter?</option><option value="domains">Track multiple domains/sites?</option><option value="spa">Add GoatCounter to a SPA?</option><option value="campaigns">Track campaigns?</option><option value="countjs-versions">Use SRI with count.js?</option><option value="countjs-host">Host count.js somewhere else?</option><option value="frame">Embed GoatCounter in a frame?</option></optgroup><optgroup label="Other"><option value="export">Export format</option><option value="sessions">Sessions and visitors</option><option value="api">API</option><option value="faq">FAQ</option><option value="translating">Translating GoatCounter</option></optgroup><optgroup label="Legal"><option value="gdpr">GDPR consent notices</option><option value="terms">Terms of use</option><option value="privacy">Privacy policy</option></optgroup></select><ul><li><strong>Basics</strong><ul><li class="active"><a href="start">Getting started</a></li><li><a href="visitor-counter">Visitor counter</a></li><li><a href="events">Events</a></li><li><a href="csp">Content-Security-Policy</a></li><li><a href="js">JavaScript API</a></li></ul></li><li><strong>Other ways to get data in GoatCounter</strong><ul><li><a href="pixel">Tracking pixel</a></li><li><a href="logfile">Server logfiles</a></li><li><a href="backend">From app backend or other sources</a></li></ul></li><li><strong>How can I…</strong><ul><li><a href="skip-dev">Prevent tracking my own pageviews?</a></li><li><a href="skip-path">Prevent tracking specific paths?</a></li><li><a href="path">Control the path that's sent to GoatCounter?</a></li><li><a href="modify">Change data before it's sent to GoatCounter?</a></li><li><a href="domains">Track multiple domains/sites?</a></li><li><a href="spa">Add GoatCounter to a SPA?</a></li><li><a href="campaigns">Track campaigns?</a></li><li><a href="countjs-versions">Use SRI with count.js?</a></li><li><a href="countjs-host">Host count.js somewhere else?</a></li><li><a href="frame">Embed GoatCounter in a frame?</a></li></ul></li><li><strong>Other</strong><ul><li><a href="export">Export format</a></li><li><a href="sessions">Sessions and visitors</a></li><li><a href="api">API</a></li><li><a href="faq">FAQ</a></li><li><a href="translating">Translating GoatCounter</a></li></ul></li><li><strong>Legal</strong><ul><li><a href="gdpr">GDPR consent notices</a></li><li><a href="terms">Terms of use</a></li><li><a href="privacy">Privacy policy</a></li></ul></li></ul> </nav> <div> <div class="page-code"><h1>Getting started</h1> <p>Getting started is pretty easy, just add the following JavaScript anywhere on the page:</p> <pre><script data-goatcounter="https://MYCODE.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script></pre> <p>Check if your adblocker is blocking GoatCounter if you don’t see any pageviews (goatcounter.com and/or gc.zgo.at domain).</p> <h2 id="integrations-1587">Integrations <a href="#integrations-1587"></a></h2> <div style="text-align: center"> <label for="int-url">Endpoint</label><br> <input type="text" value="https://MYCODE.goatcounter.com/count" style="width: 28em"><br> <span style="color: #999">You’ll need to copy this to the integration settings</span> <style> .integrations { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1em; margin-bottom: 2em; } .integrations a img { float: left; } .integrations a { line-height: 40px; padding: 10px; width: 10em; margin: 1em; box-shadow: 0 0 4px #cdc8a4; } .integrations a:hover { text-decoration: none; color: #00f; background-color: #f7f7f7; } .integrations a.active { background: linear-gradient(#d0cecc, #f0f0f0); } .popbox { display: none; padding: 1em; margin: 3em; margin-top: -2em; box-shadow: 0 0 4px var(--box-shadow); background-color: var(--bg); } </style> <div class="integrations"> <a href="https://www.npmjs.com/package/gatsby-plugin-goatcounter"> <img width="40" height="40" src="//static.zgo.at/int-logo/gatsby.svg"> Gatsby</a> <a href="https://github.com/htejera/publii-goatcounter-analytics-plugin"> <img width="40" height="40" src="//static.zgo.at/int-logo/publii.svg"> publii</a> <a href="https://www.schlix.com/extensions/analytics/goatcounter.html"> <img width="40" height="40" src="//static.zgo.at/int-logo/schlix.png"> schlix</a> <a href="https://github.com/arp242/goatcounter-wordpress"> <img width="40" height="40" src="//static.zgo.at/int-logo/wp.png"> WordPress</a> <a href="" class="expand" data-expand=".write-as"> <img width="40" height="40" src="//static.zgo.at/int-logo/write-as.svg"> Write.as</a> </div> </div> <div class="popbox write-as"> Paste the following in <em>Custom Javascript</em> in the <em>Customize</em> page: <pre>const script = document.createElement('script'); script.setAttribute('defer', true); script.setAttribute('src', 'https://gc.zgo.at/count.js'); script.setAttribute('data-goatcounter', 'https://MYCODE.goatcounter.com/count'); document.body.appendChild(script);</pre> </div> <h2 id="after-setup-1587">After setup <a href="#after-setup-1587"></a></h2> <p>Here are some things you may want to look at after setting up the above:</p> <ul> <li><p>Make sure GoatCounter is allowed in the <a href="/code/csp">Content-Security-Policy</a> if you’re using it.</p></li> <li><p>If you’re not seeing any pageviews then chances are your browser’s adblocker is blocking it. Disable it and check again. It can take about 10 seconds for pageviews to appear, but this should never be longer.</p></li> <li><p>You may want to consider adding a canonical link, for example:</p> <pre><code><link rel="canonical" href="https://example.com/path.html"> </code></pre> <p>See <a href="/code/path">Control the path that’s sent to GoatCounter</a> for more details.</p></li> <li><p><a href="/code/skip-dev">Prevent tracking my own pageviews?</a> documents some ways you can ignore your own pageviews from showing up in the dashboard.</p></li> </ul> </div> <h2 style="border:0; margin-bottom: .2rem; margin-left: .5rem;">Questions or problems?</h2> <div class="page-code"> <p style="margin-top: 0">Feel free to get in touch if you’ve got any questions or having any problems; a lot of times they can be resolved without too much problems.</p> <p>Ways to contact me: <a href="#" class="show-contact">show</a> </p> <div style="display: none;" class="contact"> <ul> <li>Open a <a href="https://github.com/arp242/goatcounter/issues/new">GitHub issue</a>. It’s fine to use this for support requests or general questions, as GitHub issues are public and the answers may be useful for others in the future.</li> <li>Email: <a href="mailto:support@goatcounter.com">support@goatcounter.com</a>.</li> </ul> <form method="post" action="/contact" class="contact-form"> <input type="hidden" name="return" value="/help/start"> <strong>Send message</strong> <div class="f"> <div> <label for="email">Email</label><br> <input type="text" id="email" name="email" ><br> <span>Make sure this is correct</span> </div> <div> <label for="turing">Enter 9 here</label><br> <input type="text" id="turing" name="turing" ><br> <span>Just to verify that you’re human</span> </div> </div> <div> <label for="message">Your message</label><br> <textarea id="message" name="message"></textarea><br> <button type="submit">Send</button> </div> <div id="scroll-target"></div> </form> </div> </div> </div> </div> <footer class="center cbox"> <div> <a href="https://www.goatcounter.com">Home</a><span> |</span> <a href="/contact" >Contact</a><span> |</span> <a href="/help" >Documentation</a><span> |</span> <a href="/contribute">Contribute</a> </div> <div> <a href="https://github.com/arp242/goatcounter" target="_blank" rel="noopener">Source code</a><span> |</span> <a href="https://nlnet.nl/project/GoatCounter/" target="_blank" rel="noopener">NLnet NGI0</a><span> |</span> <a href="https://github.com/sponsors/arp242" target="_blank" rel="noopener">GitHub sponsors</a><span> |</span> <a href="https://www.producthunt.com/posts/goatcounter" target="_blank" rel="noopener">Product Hunt</a><span> |</span> <a href="https://alternativeto.net/software/goatcounter/about" target="_blank" rel="noopener">AlternativeTo</a> </div> </footer> <script data-goatcounter="https://goatcounter.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script> <script crossorigin="anonymous" src="//static.zgo.at/jquery.js?v=a6284282"></script> <script crossorigin="anonymous" src="//static.zgo.at/help.js?v=a6284282"></script> </body> </html>