search

Install Hosted Version

How to integrate your website with Safary script (hosted version)

hashtag
Table of Contents

  1. How to integrate your website with Safary script (hosted version)

    1. (Optional) If your site has a Content Security Policy (CSP)

hashtag
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.

  1. First, once you have signed up, go to your Safary's home page (https://app.safary.club/arrow-up-right). 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

  2. Now click on the copy icon on the left of the code to copy the contents of the tracking script

  3. Go 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:

hashtag
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.

  1. In Safary's home page (https://app.safary.club/arrow-up-right), 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"

  2. 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

  3. Now you can click on the copy icon on the left to copy the contents of the policy.

  4. Finally, you need to add the directives in the place you implement CSP, which can vary.

    1. 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.

    2. 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:

PreviousAdd Safary scriptNextInstall Self Hosted Version

Last updated