Skip to main content

Banner Installation

⚠️ NOTE: For integrating Avacy with Google Tag Manager using the new Google Consent Mode V2, follow this guide

To integrate the banner, you first need to generate the corresponding script from the Avacy SaaS platform. It consists, as mentioned before, of three scripts:

<script id="oil-configuration" type="application/configuration" data-remote-config="https://avacy-cdn.url/domain-group-uuid.json"></script>
<script src="https://unpkg.com/@jumpgroup/avacy-banner/dist/oil.min.js"></script>
<script src="https://unpkg.com/@jumpgroup/avacy-banner/dist/oilstub.min.js"></script>

The integration can be done either by manually inserting it into your web page, i.e., simply copying the generated script into the web page, or through a tag manager.

The scripts should be inserted into your web page before any other scripts to ensure they are managed by Avacy.

The first script contains the banner configuration, represented by a JSON object (details are visible in the following paragraph), which can be acquired either locally or remotely. In the case of local configuration, the JSON object is directly included within the script tag.

For remote configuration, there will be a data-remote-config attribute with the URL where the configuration object is stored.

Once the scripts are inserted on the page, the banner will be visible within it.

Self-Hosted Release and Remote Hosting

You can use a self-hosted Release of Avacy to improve the performance of the banner.

The steps to follow are:

  1. Upload the folder containing the Avacy release locally: a zip file of the release will be provided.
  2. Insert the path to the Avacy release in the configuration object
 "publicPath": "/path/della/cartella"
  1. Change the src attribute path in the oil and oilstub scripts
<script src="/path/della/cartella/oilstub.2.12.2-SNAPSHOT.min.js"></script>
<script src="/path/della/cartella/oil.2.12.2-SNAPSHOT.min.js" ></script>

In case of remote configuration, you won't need to include the folder within the project, but you will need to specify the remote path of the CDN where it is hosted (es. if using unpkg, the path will be in the format https://unpkg.com/:package@:version/:files)

Installing the Banner on Wordpress

The Avacy Cookie Banner can be easily added to your site with a script that integrates with most websites.

To integrate the banner script on a Wordpress site, follow these steps:

  1. Copy the banner script from Avacy and enter the backoffice of your Wordpress site.

    avacy

  2. In the list of tools on the left, find the Plugins section. Clicking on this tool will show you the list of installed and/or downloadable plugins.

    backofficewordpress

  3. Search for the "Header Footer Code Manager" plugin in the search bar on the right, and install it if it is not already present.

    plugin

  4. Go to the plugin settings and add a new Snippet by clicking the button at the top left.

  5. Configure the snippet by naming it, setting the type to HTML, and the location to Header.

    impostazioni

  6. Paste the banner script into the code space of the snippet as shown in the example and save.

    code

Now the Avacy banner will be visible on the site and will appear to every new user who visits the site.

Installing the Banner on Elementor

To install the Avacy Cookie Banner on a site created with Elementor, copy the banner script to your clipboard and follow these instructions:

  1. Enter the backoffice of the site. In the list of tools on the left, you will find the Elementor option with the "Custom Code" submenu.

    elementor-code

  2. Click the "Custom Code" submenu and add a new code snippet.

  3. Give the code a name and paste the Avacy Cookie Banner script you copied earlier into the designated space. Ensure that the script location is set to <head> and publish the code.

Note: Make sure that the general site style settings in Elementor do not override the style of the banner. To check this, go to the frontend of the site and under "Edit with Elementor" you will find the "Site Settings".

edit-elementor

Go to the site settings and in the section related to the theme styles for buttons, ensure that no color or font settings are overriding the style of the Avacy cookie banner.

Installing the Banner on Shopify

To integrate the banner script on a site created with Shopify, follow these steps:

  1. Go to the site, click on "Online Store" in the left-hand menu, and go to Themes.

  2. Click the three dots next to the theme you are using and select "Edit Code".

    edit-elementor

  3. In the search bar at the top left, find the theme.liquid file, open it, copy the Avacy cookie banner code, and paste it before the line with <head>.

    edit-elementor

  4. Save the changes so that the cookie banner appears on the site.

Installing the Banner on Magento

  1. To integrate the Avacy cookie banner on Magento, go to the Content section in the left-hand tool panel and click on Configuration.

    edit-elementor

  2. Click Edit on the theme you are using, open the Head HTML section, press Enter to create a blank line, and paste the banner code into the space reserved for scripts, while keeping any other existing codes in that space.

    edit-elementor

  3. Save the configuration.

Installing the Banner on HubSpot

  1. To integrate Avacy on HubSpot, go to the Marketing section and click on the subcategory Website, then open Website Pages.

    edit-elementor

  2. Click Edit on a page of the site and go to the Advanced Settings.

    edit-elementor

  3. Paste the cookie banner code into the HTML Head space, then save. Note: Repeat this step for every page on the site.

    edit-elementor

Installing the Banner on Google Tag Manager

  1. To integrate the banner on Google Tag Manager, access the GTM dashboard, click on Add a new tag.

    edit-elementor

  2. Click on Tag Configuration, search for and select Custom HTML.

    edit-elementor

  3. Paste the banner code into the designated space and click the Triggering block, selecting All Pages so that the banner appears on all pages of the site.

    edit-elementor

  4. Copy the consent event activation code below:

<script>
window.addEventListener('avacy_consent', function(event) {  
  console.log('event.detail', event.detail)
  if (event.detail.purposes) {
    event.detail.purposes.forEach(function(element){
        window.dataLayer.push({
          event: 'avacy_consent_given_purpose_' + element
        });
      })
  }
  
  if (event.detail.customVendorsWithConsent) {
    event.detail.customVendorsWithConsent.forEach(function(element){
        window.dataLayer.push({
          event: 'avacy_custom_vendor_' + element.id
        });
      })
  }
  
  if (event.detail.iabVendorsWithConsent) {
    event.detail.iabVendorsWithConsent.forEach(function(element){
        window.dataLayer.push({
          event: 'avacy_iab_vendor_' + element.id
        });
      })
  }
})
</script>

  1. Create a Custom HTML tag with the All Pages trigger. Name it Avacy Events.

    edit-elementor

Creating Triggers for Tags in GTM

  1. Go to the Active Vendors List in Avacy and select a vendor, for example Google, and copy the trigger ID (e.g., avacy_iab_vendor_755) found in the info message of the vendor.

  2. Create a Custom Event trigger and name it Avacy Google Trigger (use the vendor name you chose).

    edit-elementor

    Note: This procedure needs to be repeated for all vendors listed in the Active Vendors List in Avacy.

Creating Basic Page View Tags

  1. Create a Page View Tag and use the trigger you created earlier in the Creating Triggers for Tags in GTM guide.

    edit-elementor

Creating Tags for Tracking Specific Events

Specific events might include newsletter sign-ups. For example, if you want to track sign-ups on Google Analytics 4, Meta, and Pinterest, you will need three triggers for the "Newsletter Signup" tag, one for each provider.

  1. Create a trigger of type Custom Event/Click for your event.

  2. Create a group of triggers with the newly created trigger and the provider trigger created earlier following the Creating Triggers for Tags in GTM guide. Name it so it is recognizable.

    The trigger groups should be created for each event and for all those vendors listed in the Active Vendors List for which you want to perform tracking.

    edit-elementor

  3. Create the appropriate tag and select the newly created trigger group.

    edit-elementor

    Note: This operation should be repeated similarly for all subsequent events you want to track on your site. The Google trigger is valid for all Google products.

Once you have completed the procedure, publish the container.