diff --git a/README.md b/README.md index 01297a1..9cf2e51 100644 --- a/README.md +++ b/README.md @@ -22,4 +22,35 @@ git submodule add https://github.com/cbos/hugo-faro-analytics.git themes/faro-an ``` {{ partial "faro-analytics/assets/js" . }} +``` + +## Site Configuration TOML + +| Parameter | type | required | description | +|-------------|--------|----------|----------------------------------------------------------------------------------------------| +| endpoint | string | yes | Url of the Faro collector like https://faro-collector-prod-eu-west-2.grafana.net/collect/xxx | +| name | string | yes | Name of the application | +| version | string | no | Version to report, can be used to make distinction between releases | +| environment | string | no | Environment, can be used to make distinction between for example local and production | + +```toml +[params] +[params.faro_analytics] + endpoint = "https://faro-collector-..." + name = "name" + version = "1.0.0" + environment = "production" +``` + +## Page Configuration TOML + +If you want to exclude a page from analytics, you can configure that per page. + +| Parameter | type | required | description | +|-------------|---------|----------|-----------------------------------------------------------------------| +| enabled | boolean | no | By default analysis for a page is abled. Make it `false` to disable it | + +```yaml +faro_analytics: + analyze: true ``` \ No newline at end of file diff --git a/layouts/partials/faro-analytics/assets/js.html b/layouts/partials/faro-analytics/assets/js.html index 72d7db8..252e5da 100644 --- a/layouts/partials/faro-analytics/assets/js.html +++ b/layouts/partials/faro-analytics/assets/js.html @@ -1,5 +1,47 @@ - +{{- if default true .Params.faro_analytics.analyze }} +{{- $endpoint := site.Params.faro_analytics.endpoint }} +{{- $name := site.Params.faro_analytics.name }} +{{- $version := site.Params.faro_analytics.version }} +{{- $environment := site.Params.faro_analytics.environment }} \ No newline at end of file + (function () { + var webSdkScript = document.createElement("script"); + + webSdkScript.src = + "https://unpkg.com/@grafana/faro-web-sdk@^1.0.0/dist/bundle/faro-web-sdk.iife.js"; + + webSdkScript.onload = () => { + window.GrafanaFaroWebSdk.initializeFaro({ + url: "{{ $endpoint }}", + app: { + name: "{{ $name }}", + version: "{{ $version }}", + environment: "{{ $environment }}", + }, + }); + + + // Load instrumentations at the onLoad event of the web-SDK and after the above configuration. + // This is important because we need to ensure that the Web-SDK has been loaded and initialized before we add further instruments! + var webTracingScript = document.createElement("script"); + + webTracingScript.src = + "https://unpkg.com/@grafana/faro-web-tracing@^1.0.0/dist/bundle/faro-web-tracing.iife.js"; + + // Initialize, configure (if necessary) and add the the new instrumentation to the already loaded and configured Web-SDK. + webTracingScript.onload = () => { + window.GrafanaFaroWebSdk.faro.instrumentations.add( + new window.GrafanaFaroWebTracing.TracingInstrumentation() + ); + }; + + // Append the Web Tracing script script tag to the HTML page + document.head.appendChild(webTracingScript); + }; + + // Append the Web-SDK script script tag to the HTML page + document.head.appendChild(webSdkScript); + })(); + +{{- end }} \ No newline at end of file