Alternative Implementations

Below are alternative ways for how to add tracking to your site, if the default is not possible. Please note, that you should replace "##########" in the examples with the domain of your site, e.g. "mysite.com", as registered through the dashboard.

DOM-free version

If for some reason you can't add custom HTML to your templates, or you are using tag management systems, you can use the JavaScript-only implementation.

The following code, using JavaScript, first creates the DOM/HTML element, and then loads the Parse.ly code in the standard way:

<!-- START Parse.ly Include: DOM-Free -->
<script>
(function(d) {
  var site = "##########", // replace with the domain of your site (e.g. parsely.com)
      b = d.body,
      e = d.createElement("div");
  e.innerHTML = '<span id="parsely-cfg" data-parsely-site="'+site+'"></span>';
  e.id = "parsely-root";
  e.style.display = "none";
  b.appendChild(e);
})(document);
(function(s, p, d) {
  var h=d.location.protocol, i=p+"-"+s,
      e=d.getElementById(i), r=d.getElementById(p+"-root"),
      u=h==="https:"?"d1z2jf7jlzjs58.cloudfront.net"
      :"static."+p+".com";
  if (e) return;
  e = d.createElement(s); e.id = i; e.async = true;
  e.src = h+"//"+u+"/p.js"; r.appendChild(e);
})("script", "parsely", document);
</script>
<!-- END Parse.ly Include: DOM-Free -->

Note

The Parse.ly crawler does not support pages that asynchronously load their JSON-LD metadata tags. The tracking code may be loaded with the above code, but the same method will not work for JSON-LD metadata tags. Please contact support@parsely.com to discuss custom crawling options for your site.

Fully synchronous tracker

Some customers have noticed that pages of their site that take awhile to load and include high-bounce traffic will never be tracked by Parse.ly's systems. This is because Parse.ly's tracker is last-loading, and so the user never gives your web page enough time for Parse.ly's tracker to load.

This can result in Parse.ly's pageview counts being much lower than a comparable web analytics system, such as Google Analytics or Adobe SiteCatalyst (Omniture).

In order to debug and diagnose these scenarios, Parse.ly has support for a "fully synchronous" JavaScript tracker. With our team's guidance, it can be instrumented on your pages such that it is guaranteed to load as quickly as the rest of your page's content, rather than asynchronously.

To enable synchronous tracking, a change is necessary to the standard Parse.ly JavaScript include. Remove the standard snippet and replace it with a tag of the form

<script data-parsely-site="mysite.com" id="parsely-cfg" src="//d1z2jf7jlzjs58.cloudfront.net/code/ptrack-v0.8.0-engaged-time-sync.js"></script>

Where mysite.com is changed to your site's Parse.ly API key and ptrack-v0.8.0-engaged-time-sync.js is changed to the specific name of the JavaScript bundle you'd like to use. For exact naming conventions and integration help, please file a support ticket.

Tracking from an iframe element

Follow these instructions if you are unable to insert the JavaScript tracker directly into the markup of your pages, and instead must insert it into an iFrame:

First, on your server create a file called parsely.html with the following markup:

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<!-- START Parse.ly Include: Standard -->
<div id="parsely-root" style="display: none">
  <span id="parsely-cfg" data-parsely-site="##########"></span>
</div>
<script>
(function(s, p, d) {
  var h=d.location.protocol, i=p+"-"+s,
      e=d.getElementById(i), r=d.getElementById(p+"-root"),
      u=h==="https:"?"d1z2jf7jlzjs58.cloudfront.net"
      :"static."+p+".com";
  if (e) return;
  e = d.createElement(s); e.id = i; e.async = true;
  e.src = h+"//"+u+"/p.js"; r.appendChild(e);
})("script", "parsely", document);
</script>
<!-- END Parse.ly Include: Standard -->
</body>
</html>

And then add an iframe element to all the trackable pages, with src pointing to where the html file is located.

<iframe name="parsely_tag" src="/path/to/parsely.html" style="display: none"
 width="0" height="0" tabindex="-1"></iframe>

Note

The parsely.html file should be accessible on the same protocol (http/https), domain, and port as the page which contains the iframe itself or the javascript will fail to execute due to cross-site scripting limitations.

Tracking from an IAB SafeFrame

IAB has a standard for "managed, API-enabled iframe elements that open a line of communication between the publisher page content and iframe-contained external content." It is called SafeFrame 1.0. Though not strongly recommended due to some confusing implementation issues that can be hard to debug, the Parse.ly tag can be integrated via this standard.

To understand the idea behind this technology, read the first few pages of the SafeFrame Spec PDF.

The trick for integrating with this standard is to combine various parts of our dynamic JavaScript API:

  • setting the autotrack configuration option to false will disable DOM access upon Parse.ly tag load
  • using a custom onload handler will allow you to fetch your own url, urlref, and title properties from the parent page securely using the SafeFrame JavaScript API
  • using our :ref:dynamic beacon JavaScript API <dynamic-beacon> will let you override those values for standard pageview requests

The below example uses the DOM-free tag combined with the above approaches to support the SafeFrame standard, and has been verified to work with Yahoo's SafeFrame testing tool.

// $sf.ext.meta looks up metadata from parent window. Here's
// the relevant documentation from the SafeFrame standard:
//
// "Use to retrieve metadata about the SafeFrame position that
// was specified by the host. The host may specify additional
// metadata about this 3rd party content. The host specifies
// this metadata using the $sf.host.PosMeta class."
//
// The rest of this code does not depend on SafeFrame.
//
function getParam(name) {
    return $sf.ext.meta(name);
};

//
// Called when the Parse.ly bootstrap code finishes loading.
//
function handleParselyOnload() {
    var url = getParam("url"),
        urlref = getParam("urlref"),
        title = getParam("title");
    PARSELY.beacon.trackPageView({
        url: url,
        urlref: urlref,
        title: title,
        js: 1,
        action_name: "SafeFrame PV"
    });
};

//
// Configures Parse.ly bootstrap code for custom load-time behavior.
//
PARSELY = {
    // don't use default tracking, which will use wrong
    // url, urlref, and title properties
    autotrack: false,
    // use our custom handler to fetch them from parent page
    onload: handleParselyOnload
};

//
// Standard DOM-free Parse.ly tag
//
(function(d) {
    var site = "#####-your-api-key-#####",
        b = d.body,
        e = d.createElement("div");
    e.innerHTML = '<span id="parsely-cfg" data-parsely-site="'+site+'"></span>';
    e.id = "parsely-root";
    e.style.display = "none";
    b.appendChild(e);
})(document);
(function(s, p, d) {
    var h=d.location.protocol, i=p+"-"+s,
        e=d.getElementById(i), r=d.getElementById(p+"-root"),
        u=h==="https:"?"d1z2jf7jlzjs58.cloudfront.net"
        :"static."+p+".com";
    if (e) return;
    e = d.createElement(s); e.id = i; e.async = true;
    e.src = h+"//"+u+"/p.js"; r.appendChild(e);
})("script", "parsely", document);

The host page needs to populate the metadata passed to the SafeFrame as follows:

Metadata key name Parent page variable
url location.href
urlref document.referrer
title document.title
Do you have an urgent support question?