> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tryprofound.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Install Profound Pixel

> A step-by-step guide to install and use your Profound Pixel

This guide walks you through everything you need to get started with Profound Pixel: getting your pixel ID, adding the code snippet to your website, setting up and verifying conversion tracking.

## Before you start

Have these things in place before any code goes on your site:

1. **Sign the data processing addendum.** The pixel sends Profound end-user data your current agreement doesn't cover. Reach out to your ads representative, and don't install until the addendum is signed.
2. **Tell your Profound team your domains.** Each pixel ID carries its own list of allowed domains, and events from a domain that isn't on the list are not processed. Share every hostname you'll install the pixel on.

## Installation steps

<Steps>
  <Step id="step-1" title="Get your pixel ID">
    In the Profound platform, go to **Ad Manager** (in the left sidebar, under **Ads**), select **Conversions** in the top-right corner, then under **Your pixels**, select **Generate pixel**.

    <Note>
      Each pixel ID covers one site or environment.
    </Note>
  </Step>

  <Step id="step-2" title="Add the snippet to your website">
    Install the snippet manually or through Google Tag Manager.

    <Tabs>
      <Tab title="Manual installation">
        Paste this code snippet into the `<head>` of every page you want to measure, and replace `<YOUR_PIXEL_ID>` with the pixel ID you retrieved in [step 1](#step-1):

        ```html expandable theme={null}
          <script>
            (function (w, d, s, u) {
              try {
                if (w.pfq) return;
                var q = function () { q.q.push([].slice.call(arguments)); };
                q.q = [];
                w.pfq = q;
                var js = d.createElement(s);
                js.async = true;
                js.src = u;
                js.onerror = function () { w.pfq = function () {}; };
                var f = d.getElementsByTagName(s)[0];
                if (f && f.parentNode) f.parentNode.insertBefore(js, f);
                else d.head.appendChild(js);
              } catch (e) {}
            })(window, document, "script", "https://pixel.profound.click/sdk/v1/p.js");

            pfq("init", "<YOUR_PIXEL_ID>");
            pfq("track", "page_viewed");
          </script>
        ```

        Keep both `pfq` function calls. They do different jobs:

        * `pfq("init", …)` sets up identity and consent handling and captures the ad click ID from the landing URL. It records nothing by itself.
        * `pfq("track", "page_viewed")` records the page view. Without it, the page reports nothing.

        **Placement rules**:

        * Place the snippet on every page you want measured. A good practice is to add it to every page through your global layout or base template.
        * Place it in `<head>`, as early as practical. The snippet must run before anything can rewrite the landing URL, to prevent the loss of ad click IDs.
        * Place it once per page. The snippet ignores copies of itself (`if (w.pfq) return`), but the `page_viewed` line doesn't: copies count every page view multiple times.

        <Note>
          **Single-page apps must record their own page views.** The pixel doesn't watch for route changes, so call `pfq('track', 'page_viewed')` once on each route change you want recorded.
        </Note>
      </Tab>

      <Tab title="Google Tag Manager">
        If you manage your site's tags in Google Tag Manager, install the pixel as a [Custom HTML tag](https://support.google.com/tagmanager/answer/6107167):

        1. In Google Tag Manager, create a new tag and choose the **Custom HTML** tag type.
        2. Paste in the code snippet from the **Manual installation** tab, and replace `<YOUR_PIXEL_ID>` with the pixel ID you retrieved in [step 1](#step-1).
        3. Set the trigger to **Initialization - All Pages**.
        4. Under **Advanced Settings** > **Tag firing options**, choose **Once per page**.
        5. Under [Consent Settings](https://support.google.com/tagmanager/answer/10718549), choose **No additional consent required**.

        <Note>
          The last two settings may look overly permissive, but they're intentional: the pixel manages consent itself, and firing it too late loses the ad click ID, so conversions can't be tied back to ads.
        </Note>

        If your site is a single-page app, add a second tag that calls `pfq('track', 'page_viewed')` with a [History Change trigger](https://support.google.com/tagmanager/answer/7679322), so route changes are recorded as page views.
      </Tab>
    </Tabs>
  </Step>

  <Step id="step-3" title="Set your consent posture">
    <Tip>
      Learn about how the pixel reads consent signals and what each setting does in [Consent and privacy](/pixel/consent-and-privacy#consent-handling).
    </Tip>

    The pixel starts in opt-in mode: it stores and sends nothing until a consent signal grants it.

    If your site is in the UK, the EU, or the wider European Economic Area, no action is required. Your consent management platform (CMP) provides the consent signal for the pixel.

    If you have a US-only site, you likely don't have a CMP, so you need to explicitly set the consent posture to opt-out for the pixel to be able to record events. Edit the `pfq("init", …)` line inside the snippet you added in [step 2](#step-2) so it passes the posture option:

    ```javascript theme={null}
      pfq("init", "<YOUR_PIXEL_ID>", { posture: "opt-out" });
    ```
  </Step>

  <Step id="step-4" title="(optional) Allow the pixel in your Content Security Policy">
    If your site enforces a strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP), it blocks the pixel until you allow Profound's domains.

    Add these directives to your policy:

    * [`script-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src) `https://pixel.profound.click` allows the browser to load the pixel script.
    * [`connect-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/connect-src) `https://events.profound.click` allows the pixel to send events.

    The inline snippet from [step 2](#step-2) also needs a [nonce or hash](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src) on its `<script>` block, the same way you authorize your site's other inline scripts.
  </Step>

  <Step id="step-5" title="Track your conversions">
    The snippet from [step 2](#step-2) records page views on its own, but it can't know when a visitor becomes a customer. Your site reports that by calling the `pfq` function, which the snippet makes available on every page that carries it.

    <Tabs>
      <Tab title="Manual installation">
        Add a `pfq('track', …)` call to your site's own code at the moment a conversion completes: on the order confirmation page, in the form's submit handler, wherever the conversion becomes definite. Use the standard [event name](/pixel/events#standard-events) that matches the conversion, and pass the details you have, for example:

        ```javascript theme={null}
          pfq('track', 'items_added',   { amount: 4900,  currency: 'USD', product_id: 'SKU123' });
          pfq('track', 'order_created', { amount: 12999, currency: 'USD', order_id: 'A-1001' });
          pfq('track', 'lead_created',  { form: 'contact-sales' });
        ```
      </Tab>

      <Tab title="Google Tag Manager">
        Create one more [Custom HTML tag](https://support.google.com/tagmanager/answer/6107167#custom-html-tag) per conversion type, and fire it on the trigger that marks that conversion on your site. Prefix each call with `window.pfq &&` so the tag does nothing if the install snippet's tag from [step 2](#step-2) never ran. For example:

        ```html theme={null}
          <script>
            window.pfq && pfq('track', 'order_created', {
              order_id: {{DLV - transaction_id}},
              amount: Math.round(Number({{DLV - value}}) * 100),
              currency: {{DLV - currency}},
            });
          </script>
        ```

        **Notes**:

        * The `{{DLV - …}}` variable names given above are examples only. Use the variable names defined in your Google Tag Manager container. Learn more in the [Data Layer Variables documentation](https://support.google.com/tagmanager/answer/7683362).
        * The `* 100` multiplier in the code example only suits currencies with two decimal places, such as USD or EUR. For other currencies, match the multiplier to the currency's number of decimals.
      </Tab>
    </Tabs>

    <Tip>
      For the detailed breakdown of events and their fields, see the [Events reference](/pixel/events).
    </Tip>
  </Step>

  <Step id="step-6" title="Verify it works">
    Complete a test conversion on your own site (for example, a test purchase). In your browser's network tab, filter for `events.profound.click`.

    Locate the event request produced by your test conversion and check the following:

    1. It's a `POST` request with a `202` status response.
    2. The `amount` field in the payload body is a whole number in minor units (the smallest unit for the given currency): for example, an amount of 129.99 US dollars should show as `12999`. If the amount you see is in different units, go back to the tracking code you added in [step 5](#step-5) and correct the units it sends.
    3. If your site receives European/UK traffic, test the conversion as a European visitor. Until you accept the consent banner, the pixel should send no requests and write no cookies. After you accept, requests to `events.profound.click` should appear in the network tab, and the pixel's cookies should appear in your browser's cookie storage.

           <Tip>
             Simulate a visit to your site from Europe by using a VPN, or by setting an EU-based location override in your browser's DevTools.
           </Tip>
  </Step>
</Steps>

After completing these steps, your pixel should be set up and ready to go. If you have issues during setup, see [Troubleshooting](/pixel/troubleshooting) for the most common issues, or [contact support](mailto:support@tryprofound.com).
