Installation

Installing BigPicture is simple. When you create an account, the app will walk you through setting up a new project.

After creating a new project, it will then provide you with the unique code snippet for your website.

At the moment, the primary way of installing the BigPicture code snippet is by embedding it into your site HTML.

Just copy and paste the unqiue snippet we provide you into every page of your website you want to track. For most use cases, the snippet can be either inserted into the the HEAD or BODY tags of your HTML. If you have a React or Angular based website, we recommend installing the snippet in the HEAD.

Here's an example of where it should go in the HEAD tag:

<!doctype html>
<html>
  <head>
    <title>My website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/index.css" media="screen" title="no title">

    <!-- BigPicture.io -->
    <script>!function(a,b,c){var d=a.bigPicture=a.bigPicture||{};d.SNIPPET_VERSION=1.1,d.handler=function(a){if(void 0!==d.callback)try{return d.callback(a)}catch(a){}},d.eventList=["mousedown","mouseup","click","submit"],d._q=[],d.methods=["track","identify","group","alias","integration","intelReady","on","off"],d.factory=function(a){return function(){var b=Array.prototype.slice.call(arguments);return b.unshift(a),d._q.push(b),d}};for(var e=0;e<d.methods.length;e++){var f=d.methods[e];d[f]=d.factory(f)}d.getCookie=function(a){var c="; "+b.cookie,d=c.split("; "+a+"=");return 2==d.length&&d.pop().split(";").shift()};var g=d.isEditor=function(){try{return a.self!==a.top&&(new RegExp("app"+c,"ig").test(b.referrer)||"edit"==d.getCookie("_bpr_edit"))}catch(a){return!1}}();d.init=function(e){if(d.projectId=e,!g)for(var f=0;f<d.eventList.length;f++)a.addEventListener(d.eventList[f],d.handler,!0);var h=b.createElement("script");h.async=!0;var i=g?"/editor/editor":"/public-"+e;h.src="//cdn"+c+i+".js",b.getElementsByTagName("head")[0].appendChild(h)}}(window,document,".bigpicture.io");bigPicture.init("YOUR_PROJECT_ID");</script>

  </head>

  <body>
  ...

After you create your project, you can re-access the code snippet by opening your project settings from the upper right hand corner navigation.

Project settings.