import { branding } from "../../lib/branding"; import { CodeBlock } from "../CodeBlock/CodeBlock"; import { camelSplit, indentCode } from "../../lib/code"; import { jsConfigParams } from "./params"; function getExampleJsonConfig() { return JSON.stringify( jsConfigParams.map(({ name }) => [name, "..."]).reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}), null, 2 ); } export const HtmlManual: React.FC<{ domain: string; writeKey?: string }> = ({ domain, writeKey }) => { const gVar = branding.productName.toLowerCase(); return (

Tracking Events with HTML snippet

To start tracking events with {branding.productName} just add following snippet to{" "} {""} section of your website

{``}

Configuration

You can configure {branding.productName} by adding data-* attributes to the script tag. Example:

{``} List of available configuration options: {jsConfigParams.map(param => ( ))}
Name Description
{["data", ...camelSplit(param.name)].join("-")} {param.description}

Alternatively you can define window.{gVar}Config object before inserting the snippet. Properties of the object be same as data attributes, but camel cased and without data- prefix:

{[ ``, ``, ].join("\n")}

onload hook

You can specify a piece of code that will be executed after the script has loaded. This can be useful if you want to send additional events or identify user. Example:

{[ ``, ``, ].join("\n")}

{gVar} variable implements a standard segment-compatible tracking interfaces{" "}

); };