Example Q Pixel Implementations

Updated on 29 Mar 2024
4 Minutes to read
Contributors

Print
Share
Dark
Light

Article summary

Did you find this summary helpful?

Thank you for your feedback

There are different options when adding the Q Pixel to your website:

Implementation	Best Used For...
Base Tag Only	Tracking all site traffic and tracking events using rule/URL events
Base Tag with Event Code	Tracking specific page-level events
Base Tag + Event Tags	Manual install or Google Tag Manager (or other tag managers)
Base Tag + Inline Event Code	Tracking button clicks

Base Tag Only

Place the base tag in the <head> of all pages on your website.

<head>

<!-- other website code -->

<!-- Quantcast Pixel Base Tag -->
<script type="text/javascript">
    window._qevents = window._qevents || [];
    (function() {
        var elem = document.createElement('script');
        elem.src = (document.location.protocol == "https:" ?
            "https://secure" : "http://edge") + ".quantserve.com/quant.js";
        elem.async = true;
        elem.type = "text/javascript";
        var scpt = document.getElementsByTagName('script')[0];
        scpt.parentNode.insertBefore(elem, scpt);
    })();
    window._qevents.push({
        qacct:"p-123456789", // your Quantcast pcode
        labels:"_fp.event.PageView"
    });
</script>
<!-- End Quantcast Pixel Base Tag -->

</head>

Note: This is a sample only, do not implement this code on your website.

Do this when:

You want to track all site traffic.
You want to use rule events to track events.
You will install event tags elsewhere on the page (see: Base Tag + Event Tags).
You will trigger event tags separately using a tag container.

Base Tag with Event Code

Insert event code within the Base Tag to track page-level events.

<head>

<!-- other website code -->

<!--Quantcast Pixel Base Tag -->
<script type="text/javascript">
   window._qevents = window._qevents || [];
    (function() {
        var elem = document.createElement('script');
        elem.src = (document.location.protocol == "https:" ?
            "https://secure" : "http://edge") + ".quantserve.com/quant.js";
        elem.async = true;
        elem.type = "text/javascript";
        var scpt = document.getElementsByTagName('script')[0];
        scpt.parentNode.insertBefore(elem, scpt);
    })();
   window._qevents.push({
        qacct:"p-123456789", // your Quantcast pcode
        labels:"_fp.event.PageView"
    });
   window._qevents.push({
        qacct:"p-123456789", // your Quantcast pcode
        labels:"_fp.event.Purchase",
        event:"refresh"
    });
</script>
<!-- End Quantcast Pixel Base Tag -->

</head>

Note: This is a sample only, do not implement this code on your website.

Do this when:

You want to only track a specific page of your website.
You are tracking conversions using Floodlight tags in Google Campaign Manager (formerly DCM).

Base Tag + Event Tags

Install the base tag and event tags separately (base tag on all pages, event tags on specific pages).

<head>

<!-- other website code -->

<!--Quantcast Pixel Base Tag -->
<script type="text/javascript">
   window._qevents = window._qevents || [];
    (function() {
        var elem = document.createElement('script');
        elem.src = (document.location.protocol == "https:" ?
            "https://secure" : "http://edge") + ".quantserve.com/quant.js";
        elem.async = true;
        elem.type = "text/javascript";
        var scpt = document.getElementsByTagName('script')[0];
        scpt.parentNode.insertBefore(elem, scpt);
    })();
   window._qevents.push({
        qacct:"p-123456789", // your Quantcast pcode
        labels:"_fp.event.PageView"
    });
</script>
<!-- End Quantcast Pixel Base Tag -->

<!-- Quantcast Event Tag -->
<script>
   window._qevents.push({
        qacct:"p-123456789", // your Quantcast pcode
        labels:"_fp.event.Purchase",
        event:"refresh"
   });
</script>
<!-- End Quantcast Event Tag -->

</head>

Note: This is a sample only, do not implement this code on your website.

Do this when:

You want to track all site traffic.
You will install event tags separately from the base tag (as shown).
You will install event tags using a tag container (e.g., Google Tag Manager).

Base Tag + Inline Event Code

Install this code with specific DOM elements.

<head>

<!-- other website code -->

<!--Quantcast Pixel Base Tag -->
<script type="text/javascript">
   window._qevents = window._qevents || [];
    (function() {
        var elem = document.createElement('script');
        elem.src = (document.location.protocol == "https:" ?
            "https://secure" : "http://edge") + ".quantserve.com/quant.js";
        elem.async = true;
        elem.type = "text/javascript";
        var scpt = document.getElementsByTagName('script')[0];
        scpt.parentNode.insertBefore(elem, scpt);
    })();
   window._qevents.push({
        qacct:"p-123456789", // your Quantcast pcode
        labels:"_fp.event.PageView"
    });
</script>
<!-- End Quantcast Pixel Base Tag -->

</head>

<!-- other website code -->

<button id="AddToCartButton">Add To Cart</button>
<script type="text/javascript">
  document.getElementById('AddtoCartButton').addEventListener('click', function() {
   window._qevents.push({
        qacct:"p-123456789", // your Quantcast pcode 
        labels:"_fp.event.PageView",
        event:"refresh"
    });
   }, false);
</script>

</body>

Note: This is a sample only, do not implement this code on your website.

Do this when:

You want to track all site traffic.
You want to trigger an event when a user clicks on a button, link, or other type of DOM element.

Was this article helpful?

What's Next

Inspect Your Tag

Table of contents

Base Tag Only
Base Tag with Event Code
Base Tag + Event Tags
Base Tag + Inline Event Code