Add the agent
Next, you'll need to add the agent to your form. You can choose from 2 implementation options. One is a convenience method that will generate a probe_id
and insert it into a hidden form field automatically. This is the best option most of the time.
The second option gives you access to the probe result object directly. Use this option if you want to use the probe_id
in your own script or your front-end framework.
Option 1
Include the agent script in the <head>
section of your form:
<script src="https://app.hitprobe.com/p/v1.js" async defer></script>
Then, create a hidden form field that will hold the probe_id
generated by the agent. It can have any name but we'll call it probe_id
here. It must have a data-hp-site-key
attribute with your site key:
<input type="hidden" name="probe_id" data-hp-site-key="<INSERT_SITE_KEY>">
The agent will detect this form field on load and automatically insert the probe_id
as soon as it's ready.
When you receive the form on the server, you should look for the probe_id
and have it ready to use in the server-side API call that we'll look at next.
Option 2
For using Hitprobe's probe_id
within your front-end scripts, you can initiate the Hitprobe SDK directly and receive a result object:
<script src="https://app.hitprobe.com/p/v1.js"></script>
<script>
hprobe({
siteKey: "<INSERT_SITE_KEY>"
}).then((result) => {
console.log(result);
});
</script>
You can then transfer the probe_id
to your server however you prefer in order to use it in a Hitprobe event.
Content Security Policies (CSPs)
If your site declares a CSP (Content Security Policy), you will need to add Hitprobe's domains to your policy.
Directive | Add the domain |
---|---|
script-src | *.hitprobe.com , *.hitprobe.net |
connect-src | *.hitprobe.com , *.hitprobe.net |
This allows your page to load the agent from app.hitprobe.com
, and then reach Hitprobe's platform from within the script.