--- stage: Monitor group: Product Analytics info: For assistance with this tutorial, see https://handbook.gitlab.com/handbook/product/ux/technical-writing/#assignments-to-other-projects-and-subjects. --- # Tutorial: Set up product analytics in a GitLab Pages website project **(ULTIMATE ALL EXPERIMENT)** Understanding how your users engage with your website or application is important for making data-driven decisions. By identifying the most and least used features by your users, your team can decide where and how to spend their time effectively. Follow along to learn how to set up an example website project, onboard product analytics for the project, instrument the website to start collecting events, and use project-level analytics dashboards to understand user behavior. Here's an overview of what we're going to do: 1. Create a project from a template 1. Onboard the project with product analytics 1. Instrument the website with tracking snippet 1. Collect usage data 1. View dashboards ## Before you begin To follow along this tutorial, you must: - [Enable product analytics](../../user/product_analytics/index.md#enable-product-analytics) for your instance. - Have the Owner role for the group you create the project in. ## Create a project from a template First of all, you need to create a project in your group. GitLab provides project templates, which make it easier to set up a project with all the necessary files for various use cases. Here, you'll create a project for a plain HTML website. To create a project: 1. On the left sidebar, at the top, select **Create new** (**{plus}**) and **New project/repository**. 1. Select **Create from template**. 1. Select the **Pages/Plain HTML** template. 1. In the **Project name** text box, enter a name (for example `My website`). 1. From the **Project URL** dropdown list, select the group you want to create the project in. 1. In the **Project slug** text box, enter a slug for your project (for example, `my-website`). 1. Optional. In the **Project description** text box, enter a description of your project. For example, `Plain HTML website with product analytics`. You can add or edit this description at any time. 1. Under **Visibility Level**, select the desired level for the project. If you create the project in a group, the visibility setting for a project must be at least as restrictive as the visibility of its parent group. 1. Select **Create project**. Now you have a project with all the files you need for a plain HTML website. ## Onboard the project with product analytics To collect events and view dashboards about your website usage, the project must have product analytics onboarded. To onboard your new project with product analytics: 1. In the project, select **Analyze > Analytics dashboards**. 1. Find the **Product analytics** item and select **Set up**. 1. Select **Set up product analytics**. 1. Wait for your instance to finish creating. 1. Copy the **HTML script setup** snippet. You will need it in the next steps. Your project is now onboarded and ready for your application to start sending events. ## Instrument your website To collect and send usage events to GitLab, you must include a code snippet in your website. You can choose from several platform and technology-specific tracking SDKs to integrate with your application. For this example website, we use the [Browser SDK](../../user/product_analytics/instrumentation/browser_sdk.md). To instrument your new website: 1. In the project, select **Code > Repository**. 1. Select the **Edit > Web IDE**. 1. In the left Web IDE toolbar, select **File Explorer** and open the `public/index.html` file. 1. In the `public/index.html` file, before the closing `
This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator.
` tag, paste the snippet you copied in the previous section. The code in the `index.html` file should look like this (where `appId` and `host` have the values provided in the onboarding section): ```html