Log custom activities from the client side

Write logging javascript

The client-side activity logging example from the documentation 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 downloadattribute. 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.
   1. Assign the filedownload custom activity type.
   2. Set the value to the path of the current page.
   3. 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.

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)
    });
}

Create a view component

Following the same process as earlier in this series, 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.

   C#

   CustomActivityScriptsViewComponent.cs

   Copy

   
   
    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

   CustomActivityScripts.cshtml

   Copy

   
   
    @using TrainingGuides.Web.Features.Activities.ViewComponents.Shared
   
    @model ContactTrackingAllowedViewModel
   
    @if (Model.ContactTrackingAllowed)
    {
        @*Scripts for logging custom activities*@
        <script src="~/assets/js/FileDownloadActivityLogger.js"></script>
    }
   
    

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

   _Layout.cshtml

   Copy

   
   
    ...
    @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

   _Layout.cshtml

   Copy

   
   
    ...
        <vc:custom-activity-scripts/>
    </body>
    ...
   
    

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.

   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 /adminpath to log 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.