---
title: Log custom activities
---
> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).
You may encounter use cases where you need to track visitor actions not covered by out-of-box options, or where you need to track additional details. Xperience allows you to define custom activities, which can then be logged through both client-side and server-side code.
Let's dive into the process of logging a custom activity when a visitor downloads a file using JavaScript, and logging a custom activity when a user clicks a like button using C#.
## Before you start
This guide requires the following:
- Familiarity with [C#](https://learn.microsoft.com/en-us/dotnet/csharp/), [.NET Core](https://learn.microsoft.com/en-us/dotnet/), [Dependency injection](https://learn.microsoft.com/en-us/dotnet/core/extensions/dependency-injection), and the [MVC pattern](https://learn.microsoft.com/en-us/aspnet/core/mvc/overview).
- A running instance of Xperience by Kentico, preferably [31.7.2](https://docs.kentico.com/changelog.md) or higher.
> **Note:**
>
> Some features covered in the training guides may not work in older versions.
The examples in this guide require that you:
- Have followed along with the samples from the _Consents_ section of the [Data protection series](https://docs.kentico.com/guides/development/data-protection.md) and the [Previous guides in the series](https://docs.kentico.com/guides/development/activities-and-marketing.md).
> **Info:** **Code samples**
>
> You can find a project with completed, working versions of code samples from this guide and others in the [finished branch](https://github.com/Kentico/xperience-by-kentico-training-guides/tree/finished) of the _Training guides_ repository.
>
> The [main branch](https://github.com/Kentico/xperience-by-kentico-training-guides) of the repository provides a starting point to code along with the guides.
>
> The code samples in this guide are for [.NET 8](https://learn.microsoft.com/en-us/dotnet/core/whats-new/dotnet-8/overview) only.
>
> They come from a project that uses [implicit using directives](https://learn.microsoft.com/en-us/dotnet/core/project-sdk/overview#implicit-using-directives). You may need to add additional `using` directives to your code if your project does not use this feature.
## Create custom activity types
The first step to logging custom activities is to create the activity types that represent them.
In the Xperience administration interface, navigate to the **Activity types** tab of the **Contact management** application and define activity types with the following values.
- Activity 1:
- **Display name**: File Download
- **Code name**: filedownload
- **Description**: The visitor downloaded a file.
- **Enabled:** True
- Activity 2:
- **Display name**: Page like
- **Code name**: pagelike
- **Description**: The visitor clicked a like button on a page.
- **Enabled:** True
Let's explore two different approaches for logging custom activities, using one for each of the types we just defined.
## Log file downloads
### Write logging javascript
The client-side activity logging example from the [documentation](https://docs.kentico.com/documentation/developers-and-admins/digital-marketing-setup/set-up-activities/custom-activities.md#client-side-code) calls a function from the _onclick_ attribute of a specific button.
This example uses a similar function, but stores it in a separate file rather than inline, and dynamically registers it to any links with the _download_attribute. Make sure to include this attribute on any downloadable file links that you want to track.
1. Add a new file called _FileDownloadActivityLogger.js_ to the _\~/wwwroot/assets/js_ folder of the _TrainingGuides.Web_ project.
2. Create a function called `handleClick` that logs a custom activity as outlined in the [documentation example](https://docs.kentico.com/documentation/developers-and-admins/digital-marketing-setup/set-up-activities/custom-activities.md#client-side-code).
a. Assign the _filedownload_ custom activity type.
a. Set the value to the path of the current page.
a. Assign a meaningful title that includes the `alt` attribute of the specific download link if it exists.
3. In the `window.onload` event, iterate through all the links on the page, and assign the `handleClick` function to the _click_ event of any links with the _download_ attribute present.
```js title="FileDownloadActivityLogger.js"
window.onload = function () {
const links = document.getElementsByTagName("a");
for (let i = 0; i < links.length; i++) {
if (links[i].hasAttribute("download")) {
links[i].addEventListener("click", handleClick);
}
}
}
function handleClick() {
kxt('customactivity', {
type: 'filedownload',
value: window.location.pathname,
title: 'File downloaded - ' + this.getAttribute("alt"),
persona: developer
onerror: t => console.log(t)
});
}
```
> **Info:** For the sake of readability, this example is not minified. In production scenarios, consider storing this file elsewhere and using an automated tool to render a minified version of this script to the _wwwroot_ folder.
### Create a view component
Following the same process as [earlier in this series](https://docs.kentico.com/guides/development/activities-and-marketing/enable-activity-tracking.md), create a view component class to conditionally render a script reference to your new JavaScript file to the page.
1. Add a folder called _CustomActivityScripts_ in _TrainingGuides.Web/Features/Activities/ViewComponents._
2. Create a view component to conditionally render the custom activity script if the current contact has consented to tracking.
```csharp title="CustomActivityScriptsViewComponent.cs"
using Microsoft.AspNetCore.Mvc;
using TrainingGuides.Web.Features.Activities.ViewComponents.Shared;
using TrainingGuides.Web.Features.DataProtection.Services;
namespace TrainingGuides.Web.Features.Activities.ViewComponents.CustomActivityScripts;
public class CustomActivityScriptsViewComponent : ViewComponent
{
private readonly ICookieConsentService cookieConsentService;
public CustomActivityScriptsViewComponent(ICookieConsentService cookieConsentService)
{
this.cookieConsentService = cookieConsentService;
}
public IViewComponentResult Invoke()
{
var model = new ContactTrackingAllowedViewModel()
{
ContactTrackingAllowed = cookieConsentService.CurrentContactCanBeTracked()
};
return View("~/Features/Activities/ViewComponents/CustomActivityScripts/CustomActivityScripts.cshtml", model);
}
}
```
3. Add a view that renders a script tag for your _FileDownloadActivityLogger.js_ file.
```cshtml title="CustomActivityScripts.cshtml"
@using TrainingGuides.Web.Features.Activities.ViewComponents.Shared
@model ContactTrackingAllowedViewModel
@if (Model.ContactTrackingAllowed)
{
@*Scripts for logging custom activities*@
}
```
### Add the view component to the Layout view
The script is ready to be added to the layout view. To make the script work, you need to add Xperience activity logging API to the page, along with a reference to the javascript file from the previous section.
1. Navigate to _\~Views/Shared/\_Layout.cshtml_ in the _TrainingGuides.Web_ project, and add a using directive for your new view component.
```cshtml title="_Layout.cshtml"
...
@using TrainingGuides.Web.Features.Activities.ViewComponents.CustomActivityScripts
...
```
2. At the bottom of the body tag, use the tag helper to invoke the `custom-activity-scripts` view component.
```cshtml title="_Layout.cshtml"
...
...
```
> **Tip:** If you only expect to have download links in certain parts of your site, you can improve performance by using [Razor sections](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/layout#sections) to only include these scripts for views which you know will show downloads.
### Test the code
The coding is done, so the functionality is ready to be tested.
1. Run the _TrainingGuides.Web_ project on your dev machine and visit the site in your browser.
2. Check your browser cookies in your browser's developer tools, and ensure that the _CMSCookieLevel_ cookie is set to 1000 or above.
> **Tip:** If you've completed the consent-related training guides, go to the _/cookie-policy_ page and set your preferred cookie level to _Marketing_.
3. Visit the _/policy-downloads_ page and click to download the privacy policy PDF.
4. Visit the _/admin_path to sign in to the administration interface.
5. Navigate to the **Activities** tab of the **Contact management** application to see that the download activity has been logged.
🎬 [Video](https://docs.kentico.com/docsassets/guides/log-custom-activities/CustomDownloadActivity.mp4)
## Log page likes
The next custom activity scenario we will explore is a _Page like_ widget demonstrating server-side logging with C# code. You will implement a controller action that logs a custom activity, and a widget that posts to the controller.
### Define a request model
Create a strongly-typed class to represent the data that the widget will post to the controller, to make working with the data easier. In this case, you only need information to identify which page was liked, and to retrieve the correct item, so the Id of the web page content item, and the name of the content type should suffice.
1. Add a new folder named _PageLike_ under _TrainingGuides.Web/Features/Activities/Widgets._
2. Create a class named _PageLikeRequestModel.cs_ with a property to identify the web page item.
```csharp title="PageLikeRequestModel.cs"
namespace TrainingGuides.Web.Features.Activities.Widgets.PageLike;
public class PageLikeRequestModel
{
public string WebPageItemID { get; set; } = string.Empty;
}
```
### Examine the content item retriever service
You may have noticed that the [content item query api](https://docs.kentico.com/documentation/developers-and-admins/development/content-retrieval/retrieve-page-content.md) requires a strongly typed mapping function in order to select the results of the query.
However, since you're building a widget, you may not know the content type of the web page item that your widget is placed on.
In order to account for this, you need a way to retrieve a web page item by ID when you don't necessarily know its content type. For this, you can use the `IWebPageFieldsSource` interface that all generated web page content types implement.
1. Go to the `ContentItemRetrieverService` class in _ContentItemRetrieverService.cs_.
2. Notice the method called `RetrieveWebPageById`, taking the Id of a web page and optional language name as parameters.
3. The method uses the ID to create a parameter action for another existing `RetrieveWebPages` method.
```csharp title="ContentItemRetrieverService.cs"
...
///