Script Manager

Installation

If you want to use Script Manager for your Umbraco project then these are the steps to install the package:

1. You first want to download the NuGet package to your project. You can use dotnet add package uSeoToolkit.Umbraco.ScriptManager to download the NuGet package. Make sure to build your project after that!
2. In your _ViewImports.cshtml, you want to add the following line @addTagHelper *, uSeoToolkit.Umbraco.ScriptManager.Core.
3. Add the tag <render-script position="HeadBottom"></render-script> as close to the bottom of your head tag as you can.
4. Add the tag <render-script position="BodyTop"></render-script> as close to the top of the body tag as you can.
5. Add the tag <render-script position="BodyBottom"></render-script> as close to the bottom of your body tag as you can.

Getting Started

After installing this package, you want to add the section "SEO Toolkit" to your user group as you need the section to be able to manage your scripts. After adding the section, reload the package and you should now see the "SEO Toolkit" section. Go to the section and click the "Script Manager" node. Here you can create your scripts. These are the various types of scripts that you can add:

• Google Tag Manager
• Google Analytics
• Hotjar
• Custom Script

Each of these can have its own configuration. After saving, the script should now show up on the locations that you specified in the installation.

Script Rendering

Most of the scripts are rendered through a view. If you want, you can change the view. However, your change will be reverted when the package is updated. If you spot any errors in the scripts, please report them as an issue so that they can get fixed.

Custom script definition

You might want to add a new script definition for your client to add to the website. This can easily be done in code.

public class GoogleAnalyticsDefinition : IScriptDefinition
{
    private readonly ViewRenderHelper _viewRenderHelper;
    private const string PropertyIdKey = "propertyId";

    //Name of the definition
    public string Name => "Google Analytics";
    //Alias of the definition. Used in the database
    public string Alias => "googleAnalytics";

    //Umbraco Configuration fields of the definition
    public ConfigurationField[] Fields => new ConfigurationField[]
    {
        new ConfigurationField
        {
            Key = PropertyIdKey,
            Name = "Property Id",
            Description = "Property id for Google Analytics",
            View = "textstring"
        },
    };

    public GoogleAnalyticsDefinition(ViewRenderHelper viewRenderHelper)
    {
        _viewRenderHelper = viewRenderHelper;
    }

    //Render function where you add your script to the correct location. You can use the ViewRenderHelper to render a cshtml view.
    public void Render(ScriptRenderModel model, Dictionary<string, object> config)
    {
        if (!config.ContainsKey(PropertyIdKey) || string.IsNullOrWhiteSpace(config[PropertyIdKey]?.ToString()))
            return;

        var propertyId = config[PropertyIdKey].ToString();
        model.AddScript(ScriptPositionType.HeadBottom, _viewRenderHelper.RenderView("~/Views/ScriptManager/GoogleAnalytics/Script.cshtml", propertyId));
    }
}

You can then add your new script definition in the composer by using builder.ScriptDefinitions().Add<GoogleTagManagerDefinition>()