Install Hosted Version
How to integrate your website with Safary script (hosted version)
Table of Contents
How to integrate your website with Safary script (hosted version)
To integrate your website with Safary, you need to update the front-end (HTML code) of the website you want to track.
First, once you have signed up, go to your Safary's home page (https://app.safary.club/). Under "Integrate Safary snippet" if you click on Hosted Tag, you should see something like:
Example of Safary's home page with the tracking script code Now click on the copy icon
on the left of the code to copy the contents of the tracking scriptGo to your front-end's HTML code, and simply paste (CTRL+V or CMD+V) the script's code within the
<head> … </head>tags of the pages you want to have tracking enabled.For example, we suggest adding at least to both your landing page and your "app" page, which would have a "connect wallet" functionality.
That's it. Your Safary tracking script code will look something like this in your page:
<script>var script=document.createElement('script');script.src="https://tag.safary.club/stag-X.X.X.js";script.async=true;script.setAttribute('data-name','safary-sdk');script.setAttribute('data-product-id','prd_A123456789');script.integrity="sha256-XXXXXXXXXXXXXXXX";script.crossOrigin="anonymous";var target=document.head||document.body;target.appendChild(script);</script>OPTIONAL - If your site has a Content Security Policy (CSP)
If your site has Content Security Policy (CSP) enabled, you need to add the hash of the code above.
In Safary's home page (https://app.safary.club/), you will see under "Integrate Safary snippet", a small section with the title:
"If you have a Content Security Policy (CSP) in your service - optional"
Click on that title to expand it, and you will see something like:
Example of Safary's home page with the content security policy (CSP) for the tracking script Now you can click on the copy icon
on the left to copy the contents of the policy.Finally, you need to add the directives in the place you implement CSP, which can vary.
For example, if you use Node.js with the Helmet package in your backend to setup CSP, the code above is exactly the one to be pasted in your backend.
On the other hand, if your CSP is setup using a <meta> tag in the front-end to include the policy, you can still use the hash in the <meta> tag. For example, using the above:
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'tag.safary.club' connect-src 'self' 'tag.safary.club'">
Last updated