How to add custom scripts

Home » Support » Docs » How to add custom scripts

Full Picture lets you add to your WordPress site custom scripts written in JavaScript. They are added in sections that look like this:

custom scripts configuration section

Please note that there is a “plus” icon in the bottom corner. Click it to add multiple scripts. We strongly recommend that you add scripts in separate fields.

And about the numbered fields…

  1. Display name – this is where you give the script a name. This name is displayed by a
    1. Google Analytics
    2. Facebook
    3. Splitbee
    4. Hey Oliver
    5. Wiser Notify
    shortcode which you can put in your privacy policy. (A reminder: this shortcode outputs a list of all the tracking tools you enabled in FP).
  2. Script id – the ID here is auto-generated but you can change it to whatever you want
  3. Required cookie permissions – here you choose what type of cookie a user needs to agree to before this script loads. If you don’t check any the script will load instantly.
  4. Script field – this is where you enter your modified script.

Copy > paste modify > paste

When you copy-paste scripts to Full Picture you may notice that the <script> tags are removed. This is done intentionally to allow for conditional loading of tags. Most scripts will work fine without them. The only exception is a script with a link that looks something like this:

<script src="https://example.com/script.js" async id="some_script"></script>

When you paste it to Full Picture’s script tag, than it will be removed. In such case you should replace it with the one below.

FP.getScript( 'your script URL', false, { 'parameter name' : 'parameter value' } );

Now, after modification your script from the first line should look like this:

FP.getScript( 
  'https://example.com/script.js', 
  false, 
  { 
    'async' : true,
    'id' : 'some_script' 
  }
);

(Line breaks were added to add clarity and they are optional)

Real-life example

Let’s say that – for unknown reason – you want to add a Google Analytics script to your site using custom scripts (and not the ready-to-use integration). The code looks like this:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-11111111-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-11111111-1');
</script>

When you put it in the “script field” your code will look like this:

<!-- Global site tag (gtag.js) - Google Analytics -->

  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-11111111-1');

As you can see 2 things were stripped here:

  1. the first was a script link <script src="..."></script>
  2. and the other one was the pair of <script> tags enveloping some code.

The second part is OK. You do not need to replace it with anything. It is fine.

The problematic thing is the first one, which we need to replace with our FP.getScript() function.

After the changes the code entered in the script field should look like this:

<!-- Global site tag (gtag.js) - Google Analytics -->

FP.getScript( 'https://www.googletagmanager.com/gtag/js?id=UA-11111111-1', false, { 'async' : 'async' } );

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-11111111-1');

Easy, right?

What is “script id” for?

Each custom script in Full Picture should have its own, unique ID (with one excaption, more about it in a second). If multiple scripts have the same ID than only the first one will be loaded.

Adding variables and custom data to scripts

In addition to installing scripts on your page, Full Picture also lets you extend them with information like page titles, user role, visitors country, time on page, etc.

Please read this article for more information.

Give the free version a try!