Implement Biano Pixel and Button with Mergado Pack and Google Tag Manager

Petr Mindl
5. 8. 2021
4 minutes read
Implement Biano Pixel and Button with Mergado Pack and Google Tag Manager

Do you want to customize the product display on the Biano based on customer preferences? You can do this with the Biano Pixel remarketing service and the similarity of the Biano Button function. You can only achieve the desired results by proper implementation.

Do you want to customize the product display on the Biano based on customer preferences? You can do this with the Biano Pixel remarketing service and the similarity of the Biano Button function. You can only achieve the desired results by proper implementation. Mergado Pack and Google Tag Manager are a great help.

The described implementation is allowed in PrestaShop and WooCommerce Mergado Pack modules.

Work with the web data layer

For smooth implementation, it is advisable to look into the data layer of your website.

  1. You can use the preview mode of the GTM itself or an add-on to the Chrome browser — dataslayer.
  2. In addition, we recommend having instructions for implementing GTM from Biano open.

In general:

You must first install the Mergado Pack, and activate the GTM container. For the GTM function in the module administration, it is necessary to have all Ecommerce Tracking functions activated.

Procedure for Biano Pixel:

1. In the tag manager (GTM), we first define the necessary variables (VARIABLES):

  • This is an ordinary constant whose value is our Merchant ID.

  • This variable must be defined as a Data Layer Variable. The just mentioned dataslayer will help us with that. On the product page, open the developer tools (right-click and select Explore or press the f12 function key).

    We see that the product ID is structured to “5. level” — i. e. ecommerce.detail.products.0.id. We are looking for value for the viewItem event.

    We create a new variable and name it, for example, Product ID. Select Data Layer Variable, the variable name ecommerce.detail.products.0.id, and the version of data layer 2 as the type.

    We proceed in the same way for the other variables of the data layer.

    • Product ID - AddToCart — variable name ecommerce.add.products.0.id 
    • Quantity - name ecommerce.add.products.0.quantity 
    • Unit price — name ecommerce.add.products.0.price 
    • Currency — name ecommerce.currencyCode
    • Order ID — name ecommerce.purchase.actionField.id
    • Total Order Price - name ecommerce.purchase.actionField.revenue
    • ecommerce.purchase.products — we need this variable to “pull” an array of purchased products from the data layer. Name ecommerce.purchase.products

  • This variable transforms an array of purchased products into a Biano format.

    We create a variable with the type Custom JavaScript. As content, we insert a script prepared by Biano. We just modify it a bit for the needs of our data layer. As the items variable, select the variable from the previous step ecommerce.purchase.products. For the id parameter, write instead of .productCode> .id. Other parameters remain the same.

    You can download the modified script below.

    function () {
    
    // get data from a data layer variable
      var items = {{ecommerce.purchase.products}};
    
    // transform and return values ​​in Biano Pixel format
      return items.map(function (item) {
        return {
          id: item.id.toString(),
          quantity: parseFloat(item.quantity),
          unit_price: parseFloat(item.price),
        };
      });
    }

    Now we defined all the necessary variables for pixel implementation. 

2. We now define TRIGGERS for all Biano pixel events. That means Page View, Product View, Add To Cart, and Purchase. We launch the Page View on each page. So we use the built-in All pages launcher. We define other triggers according to the events of the data layer.

  • Create a trigger with a name such as event_​ItemView, set the type to Custom Event and the name of the event viewItem (pay attention to event names and uppercase and lowercase letters). Again, the dataslayer will help us with that.

    We proceed similarly for other triggers.

    • event_​AddToCart - name addToCart.
    • event_​Purchase — name purchase.

    We have defined all the necessary triggers, and now we can create the tags themselves.

3. We will create four new tags (TAGS) for each Biano Pixel event. We choose Biano Pixel as the brand type. We must add this tag to our GTM from the Template Community Gallery and approve its use.

  • For example, we call the first tag Biano — page view, we choose Biano Pixel as the type, we write the {{Biano MERCHANT ID}} variable created by us in the Merchant ID field, the type of the Page View event and as the All Pages trigger.

  • The next tag is going to send a Product View event. We set everything as before and enter our variable {{Product ID}} in the Product ID field. Select event_​ItemView as the trigger.

  • Another tag is going to be Biano — Add To Cart. We set the brand type and Merchant ID as before. Select the Add to Cart event type, enter the {{Product ID — AddToCart}} variable in the Product ID field, the {{Quantity}} variable in the Quantity field, the {{Unit price}} variable in the Unit Price field and {{Currency} in the Currency field. Select the trigger event_​AddToCart.

  • The last tag is going to be Biano — purchase sending information about customer purchases. We will set the brand type and Merchant ID as before. Set the event type to Purchase. In the other fields we write the pre-prepared variables {{Order ID}}, {{TotalOrder Price}}, {{Currency}} and {{Biano — Purchased Products Array}}. Select event_​Purchase as the trigger.

4. Now we can use the preview of changes in GTM to check whether all variables are filled correctly and all tags are triggered. We try to run all events, i. e. visit the site, visit the product card, add to the cart, and purchase. If everything is correct, the events should also appear in the Biano administration itself.

5. Once we have everything checked, we can publish the container, and we are done.

Procedure for Biano Button:

We implement the button entirely using Google Tag Manager. It’s not the best way, but it’s enough for us to deploy and test the service. At the same time, this tutorial requires at least a basic knowledge of JavaScript, HTML, and CSS.

We recommend that you also study the instructions for implementing the Biano Button from Biano itself.

  • For the Button to work properly, it is necessary to define several variables (parameters). We can use the Product ID from the previous manual, but we still need to create the Product name and Product cover IMG.

    • a. Product ID — we have already defined it from the pixel implementation.
    • b. Product name - we create a Data Layer Variable and name ecommerce.detail.products.0.name.
    • c. Product cover IMG — this variable can be a bit more complicated because the URL of the product image is not going to be provided by the data layer. We need to find the link directly in the page code using the CSS selector or id element and define it as a variable.
      We open the developer tool again and find the element containing our image. It is best if the element has a unique id, but a class will suffice. In our case it is the element img and class = “js-qv-product-cover”. If you do not know what a CSS selector, id, and class is, we recommend that you study the required minimum first.

    Then we create a new variable of the type DOM element. As the Selection Method, we choose CSS Selector. We copy the name of the class in the value Element Selector in our case img.js-qv-product-cover and Attribute Name we enter src, which is an attribute in which the link to the image is written.

  • We have already created all the necessary triggers from the Pixel implementation instructions, so we proceed directly to the tag creation (TAG), which inserts the HTML element <a>, including all the necessary attributes, in the specified place. The Biano script then searches the page for this specific element and adds a Similar Products button instead.

    We named the tag HTML injection. Select the Custom HTML tag type and insert a script into the body. It creates the necessary element with dynamic parameters. Then we place it on the page where we need it. To start the tag before the Biano Button tag, set the Tag firing priority to 1. Select event_​ItemView as the trigger.


    Let’s not go into the details of the script itself. We only explain how to add dynamic attributes and where the resulting element is inserted on the page. In the previous steps, we created variables, which we add as values ​​for the attributes of our new element. “data-product-id”, “{{Product ID}}”, “data-product-name”, “{{Product name}}” and “data-product-image”, “{{Product cover IMG}} “. If you named the variables differently, of course, you have to edit the names.

    And now comes the last, most important part. We need to define where our new element is going to be rendered on the page. We go to the product tab and reopen the Developer Tools. We look for the element in front of which we want the Biano Button to be drawn. In our case, it was a block with information for the customer, which has id = “block-reassurance”. We write the name id in the appropriate place in the script as # block-reassurance.

    Download our script below, but keep in mind that you may need to edit it. Especially the Selector element before which you want to insert a Button.

    
        <script>
        (function() {
    
        // Create a new <a> element
        var a = document.createElement("a");
        a.setAttribute("id", "biano-recommendations-button");
        a.setAttribute("title", "Recommended products from Biano.cz");
        a.setAttribute("data-product-id", "{{Product ID}}");
        a.setAttribute("data-product-name", "{{Product name}}");
        a.setAttribute("data-product-image", "{{Product cover IMG}}");       
        a.setAttribute("data-style", "2");
        a.setAttribute("href", "https://www.biano.cz");
    
        // Add the text content
        a.innerText = "Similar BIANO products";
    
        // Get the reference to the target element
        var target = document.querySelector('#block-reassurance');
    
        // Inject the new element right before the target
        if (target) {
        target.parentNode.insertBefore(a, target);
        }
        })();
        </script>
    
  • Finally, we modify the original Biano tag — item view. Open the tag settings and check the Enable Biano Button checkbox.

  • As with the Biano Pixel, we check the changes by previewing the changes in GTM. If everything is correct, the Biano Button — Similar Products should appear on the product page.

Attract more customers in the home and decor segment. Advertise on the Biano. The correct use of its smart services will bring you more credibility and the probability that the visitor will buy from you.

Do you run a store on another e‑commerce platform? The Mergado Pack module controls several of them and can implement well-known advertising tools, including Glami Pixel, or Google Ads.

Read more: