Skip to content

Custom service allow EN

Kévin Legrand edited this page Nov 1, 2020 · 2 revisions

Function - cookies allowed

Basic operation

The following function runs automatically when the user accepts cookies :

"js": function () {
  "use strict";
}

The first step is to load the script for which the user has to give his authorization, for that it is necessary to use the function tarteaucitron.addScript ().

Google AdSens is used here as an example but it is not a tutorial to integrate it, Google AdSens is already present by default in the services of tarteaucitron, to know how to add it simply refer you to the part Add an integrated service with tarteaucitron

Here is an example with Google AdSens :

"js": function () {
  "use strict";
  tarteaucitron.addScript('//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
}

With this simple line, the google Adsens script is loaded when the user accepts cookies, already saved cookies are also automatically deleted if the user changes his mind and decides to refuse them.

If you need to pass a parameter in the URL of the script and this parameter is contained in a variable to which you do not have access in tarteaucitron, you can use the user object

Of course we can also take advantage of this function to do a whole lot of task when accepting cookies.

However, two problems remain :

  1. If the user refuses cookies then the div that contains our advertising banner (or other element of the script that you have loaded) is no longer useful.
  2. And more importantly, in the event that we have retrieved a value from the loaded script, this value is not accessible !

For problem n° 1 referred to the part Function - cookies refused

For problem # 2, the answer is below. ;)

Get the value returned by the script

In the case where the script returns a value to us, we never get this value and we cannot therefore use it ...

To overcome this problem, a very simple solution consists in adding an anonymous function in the third parameter of tarteaucitron.addScript () in which the value returned by the API will be available, like this :

"js": function () {
  "use strict";
  tarteaucitron.addScript('urlofyourapi.js', '', function () {
    // Here the value returned by the script is available ! :D
  });
}

From there, two solutions are available to you :

  1. Write your code linked to the API directly in the function here.
  2. In case the code is quite large and you prefer to move it to a separate js file, you can continue reading the documentation. :)

Use an API in a separate js file

First, create the js file in which you want to place the code that uses the API (for the example it will be "useapi.js").

⚠️ You shouldn't call your file directly in your html file like this:

<script type="text/javascript" src="/assets/js/useapi.js"></script>

Your API will not be accessible and even if you store it in the user object, it will not work because the functions de tarteaucitron only runs after the page has fully loaded, so you will get an error.

To alleviate this problem you can simply use the tarteaucitron.addScript () function again like this :

"js": function () {
  "use strict";
  tarteaucitron.addScript('urlofyourapi.js', '', function () {
    // Here the value returned by the script is available ! :D
    // and we call our personal script !
    tarteaucitron.addScript('/assets/js/useapi.js');
  });
}

This way you launch your "useapi.js" script only after loading the API and it will also have access to the value retrieved by the "urlofyourapi.js" API !

In case or for some reason, the value retrieved by the api "urlofyourapi.js" is not accessible in the file "useapi.js", you can use the user object like this :

"js": function () {
  "use strict";
  tarteaucitron.addScript('urlofyourapi.js', '', function () {
    // Here the value returned by the script is available ! :D
    // we store the value returned by the script in the user object of tarteaucitron
    // imagining that the urlofyourapi.js script gives us the yourapi object
    tarteaucitron.user.yourapi = yourapi;
    // and we call our personal script !
    tarteaucitron.addScript('/assets/js/useapi.js');
  });
}

And in our "useapi.js" file :

var yourapi = tarteaucitron.user.yourapi;
console.log(yourapi);
// It's work, i have access to the api !

Previous page - Next page