🦁
Safary Doc
  • 🏁Getting Started
  • 📖Safary Lexicon
  • DATA SOURCES
    • 🔧Add Safary script
      • Install Hosted Version
      • Install Self Hosted Version
      • Via Google Tag Manager
    • 🎯Setup Events
    • 🔌Integrations
      • CSV Import
      • Magic Link
  • DASHBOARDS
    • Profiles
    • 🧭Mindshare
    • 📈Attribution
      • Campaigns
  • BUILD
    • 💾Safary API
  • 🔒Privacy
  • ⚙️Settings
Powered by GitBook
On this page
  • Table of Contents
  • How to integrate your website with Safary script (hosted version)
  • OPTIONAL - If your site has a Content Security Policy (CSP)
  1. DATA SOURCES
  2. Add Safary script

Install Hosted Version

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

PreviousAdd Safary scriptNextInstall Self Hosted Version

Last updated 1 month ago

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.

  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:

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

    • "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:

  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:

      • <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'tag.safary.club' connect-src 'self' 'tag.safary.club'">

First, once you have signed up, go to your Safary's home page (). Under "Integrate Safary snippet" if you click on Hosted Tag, you should see something like:

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

In Safary's home page (), you will see under "Integrate Safary snippet", a small section with the title:

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

🔧
https://app.safary.club/
https://app.safary.club/
How to integrate your website with Safary script (hosted version)
(Optional) If your site has a Content Security Policy (CSP)
Example of Safary's home page with the tracking script code
Example of Safary's home page with the content security policy (CSP) for the tracking script