Track the performance of your website elements

BEYABLE offers the possibility to analyze the performance of a fragment of a web page by tracking views and clicks. The analysis measures different KPIs that can vary depending on the setup, here are some examples:

• Number of impressions
• Number of reel views
• Number of clicks
• Post-view conversions
• Post-click conversions
• Number of new post-view leads
• Number of new post-click leads
• ...

Create a Performance tracking campaign

The first thing to do is to create a Performance tracking campaign into the BEYABLE platform.
The campaign created allows two things :

1. Obtain the campaign identifiers needed for tracking
2. Access the performance report

When the campaign is created, obtain the following 2 identifiers, they will be used in the next step :

• slide ID
• campaign ID

Integrate the campaign on your website

For an HTML element to be recognized as a Performance tracking campaign, it must be wrapped in a tag <beyable-campaign>. This tag must contain the following 2 attributes :

Attribute	Value
data-slide-id	contain the slide ID
data-campaign-id	contain the campaign ID

Example

<beyable-campaign data-campaign-id="<!-- campaignID -->" data-slide-id="<!-- slideID -->">
    <!-- Put your HTML here -->
</beyable-campaign>

Track clicks

To track clicks on buttons or links placed in the main element, they must contain the following attribute:

Attribute	Value
data-click-interaction	contain the name of the interaction to be measured

<button data-click-interaction="click_learn_more">Learn more</button>
<button data-click-interaction="click_close">Close</button>

To measure clicks on products, you have the possibility to add the product ID in the name of the interaction (click_product=1), which allows to track the performance of each product.

<a href="/view/product/1" data-click-interaction="click_product=1">View product</a>
<a href="/view/product/2" data-click-interaction="click_product=2">View product</a>

Examples

Edit HTML element directly on the server side

This example shows how to measure the performance of an element by adapting its HTML structure on the server side.

<beyable-campaign data-campaign-id="<!-- campaignID -->" data-slide-id="<!-- slideID -->">
    <div class="size-guide-wrapper">
        <h3>Don't know your size?</h3>
        <p>Our size guide is here to help you.</p>
        <div>
            <button data-click-interaction="click_size_guide">
                See the size guide
            </button>
        </div>
    </div>
</beyable-campaign>

Edit HTML element using GTM

This example shows how to measure the performance of an element through GTM (or another tag manager).

Existing HTML element

<div class="size-guide-wrapper">
    <h3>Don't know your size?</h3>
    <p>Our size guide is here to help you.</p>
    <div>
        <button>
            See the size guide
        </button>
    </div>
</div>

New tag in GTM

<script>
(function() {
    var element = document.querySelector('.size-guide-wrapper');
    if (element) {
        /* Add click interactions */
        var button = element.querySelector('button');
        if (button) button.dataset.clickInteraction = 'click_size_guide';
        /* Wrap element into a new beyable-campaign component */
        var mark = document.createElement('span');
        element.insertAdjacentHTML('beforebegin', mark);
        var beyableComponent = document.createElement('beyable-campaign');
        beyableComponent.appendChild(element);
        beyableComponent.dataset.campaignId = '<CampaignId>';
        beyableComponent.dataset.slideId = '<SlideId>';
        mark.insertAdjacentHTML('beforebegin', beyableComponent);
        mark.remove();
    }
}());
</script>

Server-side product recommendation

This example shows how to measure the performance of a product recommendation block by adapting its HTML structure on the server side.

<beyable-campaign data-campaign-id="<!-- campaignID -->" data-slide-id="<!-- slideID -->">
    <div>
        <h3>Our best sellers</h3>
        <div class="product-list">
            <div class="product-item">
                <img src="/img/1.jpeg" />
                <div>Product 1 name</div>
                <a data-click-interaction="click_product=1">View product</a>
            </div>
            <div class="product-item">
                <img src="/img/2.jpeg" />
                <div>Product 2 name</div>
                <a data-click-interaction="click_product=2">View product</a>
            </div>
            <div class="product-item">
                <img src="/img/3.jpeg" />
                <div>Product 3 name</div>
                <a data-click-interaction="click_product=3">View product</a>
            </div>
        </div>
    </div>
</beyable-campaign>