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

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. 

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.

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.

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.