How to track clicks on the "Book" button on a White Label using Google Analytics GA4

The entire process of setting up Google Analytics for White Label consists of three stages:

1. Creating and setting up accounts in Google Tag Manager and Google Analytics.
2. Defining parameters for tracking actions on White Label.
3. Checking statistics in Google Analytics.

Creating and setting up accounts in Google Tag Manager and Analytics

1. Go to Google Tag Manager and create a new account.
   
2. Fill in the following fields:
   • Account Name: Enter any name, such as the name of your White Label.
   • Country: Select the country where your main traffic comes from (e.g., Netherlands).
   • Container Name: Enter the URL of your White Label.
   • Target Platform: Choose "Website."
3. Click Create and accept the Terms of Service agreement. A window with the Tag Manager code will appear.
   
4. Copy the code from the first field and place it in the code blocks in the White Label settings under the Metadata tab, then save the changes.
   
   Important! The code needs to be placed on all page types (Main, Flights result, Hotels result, Hotel preview). Additionally, make sure the code is added to all language blocks. If you’ve added three languages to your White Label, the code should be placed on all three languages for all page types.
5. Copy the code from the second field in Tag Manager and place it in the Header section in the My Blocks tab at the very top, then save the changes.
   
   Important! The code needs to be added for all languages you've added to your White Label.
6. Go to Google Analytics and create a new property (Admin -> Create -> Property).
   

Note! If you don’t have an account in Google Analytics, create a new one and the system will take you to a Property creation page automatically.

7. Fill in all fields in steps 1-3. On the final step, select Web.
   
8. Set up a web stream by entering your website's URL and name.
   
9. Click Create and continue.
10. After this, you will receive a Stream ID. Click on it.
    

Note: If Set up a Google tag window appears, ignore and close it.

11. In the Web stream details window, copy the Measurement ID.
    
12. Go back to Google Tag Manager and create a new tag.
    
13. In the Tag Configuration field, select Google Analytics -> Google Tag.
    
14. Enter the previously copied Measurement ID into the Tag ID field. In the Triggering field, select All pages.
    
15. Publish all changes by clicking Submit on the main Google Tag Manager page.
    

Defining parameters for tracking actions on White Label

Page views, scroll events, and other basic actions will automatically be collected in Google Analytics. To track clicks on the "Book" button, follow these steps:

1. Go to Google Tag Manager and configure a new built-in variable.
   
2. Click Configure and check the boxes for Click Element and Click Classes.
   
3. Go to the Triggers tab and click New. Here, we'll define the conditions that must be met for a click on the "Book" button to be recorded in the statistics.
   
4. In the opened window, select Click -> All Elements as the trigger type. Then, set Some Clicks under the activation conditions. Choose Click Classes -> contains.
   
5. You can find the class of the "Book" button using the browser's developer tools. To do this, go to your White Label site, perform a search to reach the flight search results page.
   • On the results page, open the developer console (press F12 or right-click -> Inspect) and click the icon in the top-left corner of the console window:
     
   • Hover over the "Book" button. On the right, the element's class will be displayed. In this example, it is ticket-action-button-deeplink ticket-action-button-deeplink--.
     
6. Insert this value into the trigger field and save the changes.
   
7. Go to the Tags section and create a new tag.
   
8. In the Tag Configuration field, select Google Analytics -> GA4 Event Tag.
   
9. In the opened window, enter the Measurement ID from Google Analytics (obtained earlier or available in Admin -> Property Settings in Analytics).
   In the Event Name field, enter a name by which you would like to search for events in Google Analytics, such as a book.
   
10. In the Trigger field, select the previously created trigger.
    
11. Save the settings.
12. Publish all changes by clicking Submit on the main Google Tag Manager page.

Checking statistics in Google Analytics

1. Go to Google Analytics and open the Reports tab.
2. Select Real-Time Report.
   
3. In this report, you can see all recorded events. At the bottom of the screen, you'll find the Event Count broken down by parameters.
4. Go to your White Label site and click the "Book" button. Ensure that the click is recorded in the statistics with the name you set earlier.
   

Repeat these steps for the other items for which you want to track clicks.

How to add a pop-up window to the White Label search results

Let's look at how to make a pop-up window in your White Label, which will appear when you click on the Book button in the search results for airplabe tickets. The window may contain any advertising or additional information. The example below contains a link to the Booking.com advertiser’s website with an affiliate link.

Preparing for the addition of an extension

At first, add the jquery library connection code to make everything work correctly. Open the White Label settings and go to the Footer section.

Add the following code in the code input box:

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>

Please note! The jquery library connection code is only added once. If you add other White Label extensions, you do not need to re-insert the code.

Adding a pop-up window

The code, which is responsible for the pop-up, should be placed in the Footer of the White Label (comments are given in the code, for ease of change):

<!-- modal window -->
<div id="feedback-hotel" class="hidden">
<div class="js-feedback-hotel feedback-hotel">

<!-- semi-transparent background plane -->
<div class="js-feedback-hotel-overlay feedback-hotel__overlay"></div>
<!-- semi-transparent background plane -->

<!-- white window with content -->
<div class="feedback-hotel__popup">

<!-- cross button -->
<div class="js-feedback-hotel-close feedback-hotel__close"></div>
<!-- cross button -->

<!-- title -->
<div class="feedback-hotel__title">Bought a ticket - book a hotel room!</div>
<!-- title -->

<!-- description -->
<div class="feedback-hotel__description">Up to 60% discount for our customers only</div>
<!-- description -->

<div class="feedback-hotel__action">

<!-- booking button (link to booking.com from your affiliate account) -->
<a target="_blank" data-target="booking" class="feedback-hotel__action-button" href="https://c84."><span>Book a hotel room at</span></a>
<!-- booking button (link to booking.com from your affiliate account) -->

</div>

<!-- link to compare prices on White Label -->
<!-- replace http://travel link with your White Label -->
<div class="feedback-hotel__compare">Or <a target="_blank" data-target="hotellook" href="http://travel">compare prices on the website travel</a>
</div>
<!-- link to compare prices on White Label -->

</div>
<!-- white window with content -->
</div>
</div>
<!-- modal window -->

<script>

// Opening a modal window with a delay of 7 seconds after clicking on the "Book button ..."
setTimeout(function() {
$('.ticket-action-button-deeplink').on('click', function() {
$("#feedback-hotel").removeClass("hidden");

});
}, 7000);

// Opening a modal window with a delay of 7 seconds after clicking on the "Book button ..."

// Hiding the modal window after clicking outside the modal window
$('.js-feedback-hotel-overlay').on('click', function() {
$("#feedback-hotel").addClass("hidden");

});
// Hiding the modal window after clicking outside the modal window

// Hiding the modal window after clicking on the cross button
$('.js-feedback-hotel-close').on('click', function() {
$("#feedback-hotel").addClass("hidden");

});
// Hiding the modal window after clicking on the cross button
</script>

On the Color Scheme tab, you need to place the style code before the </style> tag:

/* Hiding form and buttons */ 

.hidden { 
display: none; 
} 
.hidden-price { 
display: none; 
} 

/* Hiding form and buttons */

/* Modal window background */

.feedback-hotel__overlay {
position: fixed;
top: 0;
left: 0;
z-index: 4999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
}

/* Modal window background */

/* Container for modal window */

.feedback-hotel__popup {
position: fixed;
background: #fff;
z-index: 5000;
left: 50%;
top: 50%;
margin-left: -255px;
margin-top: -189px;
width: 671px;
height: 378px;
border-radius: 5px;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.62);
padding: 0 52px;
text-align: center;
}

/* Container for modal window */

/* The graphical element "Hotel" at the top of the modal window */

.feedback-hotel__popup:before {
content: '';
display: block;
position: absolute;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAFcCAMAAACOWpd4AAAAvVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////h8f////9Yt2l3en7y8/XW19r4aXzs7O7v8PL8/v/R6f/09feTlZnKPlP29/nu7/GNjpDy+f/9+v3x8fPw8PL25y75e4zf7v/4cYOAg4lhY2f5g5T8sb3q9f/5i5r8ucWDyZCY0qRiu3Lb796hpKm5vMGx3bnG5sxywoD5k6J2biUtAAAAFXRSTlMAP2Tf0J6vIQvtT8SIkHeEfnV/ensf1q/bAAAXxElEQVR4AezYR5K0MAyG4XG2iZOsJUuz5/53+3MO1LRQw4eZ9whPSajwA1YxqEYPnfOttcakNBPNKRljbetdN+hGhfgAEF5B6dG1id5Qat2oVXg3+1ZUelVuxVGreHW7J29oU8Y/XVQxNl07k0hz2zUXQ1SdJeFsp65yLrRPdJeS16F6vUdLd80+hor1XiztkH0JVeo9Wdot+1SbYeNp53xT0fCNiQ4ojaGO4WvpsNrTj2HUhg7N6Pi+u1fd5OBmgmh24ZR8BNTpCIObCKrpVIShnwiuqT8LYexngmzuT3GRdSLYkobnU5agswqaL3ja2lQ+tXwq/9byqfKpibbmA67f47xN7rvaesuyzXF+xN9eeTpRRqsgby8P7zc7hiIPEe8eN4aFlwViIZoGa/zczXh8PSFDBzSE6tbxW8PjI946hArFb+TpHW84QvCF9qbVXfJdW27a5Tbg/7nJXw3J72HSJ7oeDD224VluSbB8PhRCe+Aaq/Tm3c279+ZNTodd4wHicAgclOEQvuj504c2hT4CfP74fACENuzuZ/h8iIQmIJ6PkiEqeKdET8C3g3lNJr2f3zOfD5nweS+/Hn97eXvc7+Pn+OOHPoQOxK9kyAqCYPTy44c0hD4e7lcycOVgwej544cyhIcKevnxwxtCf9z94I8f1BC6dz9MwR5/faXWuD/i/63kE1X2/6vT+OsrucZa2k9N+H6SgpOS9QuJ1pryCVsXTGHH9+eST1nZ7Y06Wnw/eUEbxQB9BX4MQS/lN1ThxxAchA4wrbXkU7fQWkr+AOP7SQqmIH9A8P0kBQUOiavIjyHotvrpqvwYgvqOH8CSK6nc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) no-repeat;
background-size: 100%;
width: 160px;
height: 174px;
left: 0;
right: 0;
margin: auto;
top: -36px;
}

/* The graphical element "Hotel" at the top of the modal window */

/* Icon hiding the modal window */

.feedback-hotel__close {
cursor: pointer;
display: block;
width: 36px;
height: 36px;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+Q2xvc2UgYnV0dG9uPC90aXRsZT48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xOCAzNWM5LjM4OSAwIDE3LTcuNjExIDE3LTE3UzI3LjM4OSAxIDE4IDEgMSA4LjYxMSAxIDE4czcuNjExIDE3IDE3IDE3eiIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMTggMTYuODY5bDQuNTI1LTQuNTI2Yy40NTEtLjI2Mi44NzItLjI2IDEuMTMyIDAgLjI2LjI2LjI2Mi42OCAwIDEuMTMyTDE5LjEzIDE4bDQuNTI2IDQuNTI1Yy4zMDYuNDA0LjMwOC44MjQgMCAxLjEzMi0uMjA5LjIwOC0uNjI5LjIwNi0xLjEzMiAwTDE4IDE5LjEzbC00LjUyNSA0LjUyNmMtLjQ1MS4yNjItLjg3Mi4yNi0xLjEzMiAwLS4yNi0uMjYtLjI2Mi0uNjggMC0xLjEzMkwxNi44NyAxOGwtNC41MjYtNC41MjVjLS4yMDYtLjUwMy0uMjA4LS45MjMgMC0xLjEzMi4zMDgtLjMwOC43MjgtLjMwNiAxLjEzMiAwTDE4IDE2Ljg3eiIgZmlsbD0iI0ZGRiIvPjwvZz48L3N2Zz4=) no-repeat 50%;
position: absolute;
right: -34px;
top: -34px;
}

/* Icon hiding the modal window */

/* Title text (Bought a ticket - book a hotel room!)*/

.feedback-hotel__title {
font-weight: 700;
font-size: 1.625rem;
margin-top: 146px;
line-height: 1.875rem;
}

/* Title text (Bought a ticket - book a hotel room!)*/

/* Description text (up to 60% discount for our customers only) */

.feedback-hotel__description {
font-size: 1rem;
line-height: 2.5rem;
}

/* Description text (up to 60% discount for our customers only) */

/* Container for booking.com button */

.feedback-hotel__action {
margin: 20px 0;
}

/* Container for booking.com button */

/* Common style for booking.com button */

.feedback-hotel__action-button {
font-size: .66938rem;
line-height: .875rem;
width: 275px;
height: 58px;
border-radius: 5px;
background: #143a90;
box-shadow: 0 1px 0 0 #051f5b, 0 2px 3px 0 rgba(0, 0, 0, .3);
text-transform: uppercase;
color: #fff;
position: relative;
display: block;
margin: auto;
}

/* Common style for booking.com button */

/* booking.com Logo inside the button */

.feedback-hotel__action-button:before {
content: '';
display: block;
position: absolute;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEwIiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgMTEwIDE4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+UGFnZSAxPC90aXRsZT48ZGVmcz48cGF0aCBpZD0iYSIgZD0iTTE1LjI1NCAxMC4wNTlWLjAyMkguMDEyVjEwLjA2aDE1LjI0MnoiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNDcuMSAxLjM2N2MuMTc3Ljg5NC0uNTI2IDEuODI3LTEuNDI1IDEuODkzLS44MzcuMTEyLTEuNjc3LS41NDgtMS43NjYtMS4zOTYtLjEyNC0uNzguMzk1LTEuNTkyIDEuMTUtMS43OTQuODg5LS4yOSAxLjkyMS4zNiAyLjA0MSAxLjI5N3pNMzMuMTguODJjLjU2Mi4wMDQgMS4xMjUtLjAwNiAxLjY4NyAwIC4zNjQuMDA3Ljc2Mi4wNzggMS4wMi4zMy4yODkuMjc4LjMyNS42ODIuMzI3IDEuMDQ1LS4wMDUgMS44MDcgMCAzLjYxMy0uMDA0IDUuNDIuNDAxLS4wMjMuOTQ2LjA3MiAxLjE5LS4zMDEuNjktLjk1NyAxLjM2NS0xLjkyIDIuMDUzLTIuODc5IDEuMTM1LjAwMiAyLjI3Mi4wMDIgMy40MS4wMDItLjkwNyAxLjIzNC0xLjgyMiAyLjQ2MS0yLjczMiAzLjY5M2E0Ljk3NSA0Ljk3NSAwIDAgMS0uNTc2LjY1MmMuNDE2LjM3Mi42MzYuODY5LjkxMiAxLjMyNi43MTkgMS4zMTIgMS42MDUgMi41MzggMi40MjQgMy43OTktLjkwMy0uMDEtMS44MDYuMDE5LTIuNzA5LS4wMTQtLjUzLS4wMDktMS4wMy0uMjc2LTEuMjgyLS43MDItLjYwOC0uOTgtMS4xNTgtMS45OTItMS43NTQtMi45OC0uMTgyLS4zMDEtLjYyNC0uMjA0LS45MzQtLjI0Mi0uMDAzIDEuMzE0LjAwMiAyLjYyNi0uMDAzIDMuOTM4LTEuMDA5IDAtMi4wMTgtLjAwMi0zLjAyOCAwLS4wMDMtNC4zNjIgMC04LjcyNCAwLTEzLjA4N20xNy40NTUgNC41NmE0LjA3NSA0LjA3NSAwIDAgMSAyLjYwOC0xLjI2M2MxLjA2Mi0uMDk0IDIuMjM5LjA1IDMuMDY1LjczNy43NS42MTMgMS4wNSAxLjU2NCAxLjExMSAyLjQ2Ni4wMzcgMi4xOTUtLjAzNCA0LjM5LjAzNyA2LjU4NC0uNTgyLS4wMDgtMS4xNjUuMDI3LTEuNzQ1LS4wMi0uNDEtLjAyOC0uODI1LS4yMDgtMS4wMzUtLjU1LS4yNDktLjQxOC0uMjAyLS45MTMtLjIwNS0xLjM3NC0uMDAxLTEuMzA2LjAwNy0yLjYxMy0uMDAzLTMuOTItLjAxMy0uNDk1LS4xNDctMS4xMjUtLjcyLTEuM2EyLjQ3IDIuNDcgMCAwIDAtMi4yMTguNTU3Yy0uNTY2LjUyLS44MDggMS4yODQtLjgzIDIuMDEgMCAxLjUzMi4wMDIgMy4wNjUgMCA0LjU5OC0uOTg0LjAwMS0xLjk3LjAwMi0yLjk1NSAwdi05LjZjLjcxNS4wMzggMS40NjQtLjEwNSAyLjE1LjE0LjQyNS4xNDYuNjM1LjU1Ljc0LjkzNSIgZmlsbD0iI0ZGRiIvPjxwYXRoIGQ9Ik03NC4yOTIgNS41NWMxLjQxNC0xLjMyNyAzLjYxNy0xLjc0MiA1LjUyLTEuMjczLjczNi4xOTIgMS41MDkuNTE2IDEuOTIxIDEuMTUzLjQxMS42MzQuMTkzIDEuNDA3LjI0NyAyLjEwNi0uNTc0LS4wMTEtMS4xNDcuMDIzLTEuNzE4LS4wMTUtLjQwMS0uMDQyLS42NzQtLjM2OC0uNzk0LS43MDUtLjA4OC0uMjU3LS4zOTItLjM0NS0uNjM4LS40MTQtMS4wMjItLjIyNi0yLjE4NC4xODUtMi43NDQgMS4wM2EyLjgzOSAyLjgzOSAwIDAgMC0uMTg3IDIuNzY1Yy40MTQuODU4IDEuNDEyIDEuMzU4IDIuMzkgMS4zODMgMS4xNzUuMDU3IDIuMjY4LS41NSAzLjA1My0xLjMzLjM5OC42MjguODA1IDEuMjUgMS4yMDIgMS44OC0xLjk3NyAyLjE1NC01Ljg3MSAyLjQwNC04LjEwMi40NjQtMi4wOTItMS43NzMtMi4xNDYtNS4xODktLjE1LTcuMDQzIiBmaWxsPSIjMDBBREVGIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTQuNjgzIDQuMDkpIj48bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYSIvPjwvbWFzaz48cGF0aCBkPSJNMi43NiAxLjQ0M0MzLjM2Mi43MzggNC4yLjE4OCA1LjE1LjA2MmMuOTI0LS4xMjQgMS45NTIuMDMyIDIuNjcuNjQ5LjMzLjI2OC41MzkuNjQuNzY1Ljk4OUM5LjI2Ljc3NyAxMC4zNC4xMzMgMTEuNTEuMDQxYzEuMDQtLjA5MiAyLjIxMi4xMzkgMi45MTIuOTUuNjc4Ljc4Mi44MiAxLjg0OS44MzIgMi44MzctLjAwMiAyLjA3NS4wMDQgNC4xNS0uMDA1IDYuMjI1LS43MjctLjA0Ni0xLjUwMy4xMTgtMi4xOTItLjE3My0uNTMtLjI0Ny0uNjI0LS44ODItLjYxNC0xLjM5MyAwLTEuNTE0LjAwNi0zLjAyOSAwLTQuNTQyLS4wMzEtLjQ3My0uMDk4LTEuMDgzLS42LTEuMzA3LS42NS0uMjU2LTEuNDA4LS4wMDctMS44ODQuNDYxLS42MzIuNjE3LS44OTIgMS41MS0uOTM3IDIuMzYuMDAyIDEuNTI4LS4wMDMgMy4wNTcuMDA1IDQuNTg3LS45MzguMDEyLTEuODc2LjAwMi0yLjgxMy4wMDVWNC4yNmMtLjAxLS40OC0uMDUyLTEuMDEyLS4zOTUtMS4zOS0uMzM2LS4zOC0uOTMtLjM5OC0xLjM4OC0uMjU0LS42NC4yMjctMS4wNjcuODA4LTEuMzE2IDEuNC0uMy42OTMtLjM1IDEuNDU1LS4zNTEgMi4xOTh2My44MzhILjAxM1YuMjRDLjczLjI3NCAxLjUxLjExNSAyLjE3MS40NmMuMzc1LjE5My40ODYuNjE2LjU4OC45ODIiIGZpbGw9IiMwMEFERUYiIG1hc2s9InVybCgjYikiLz48L2c+PHBhdGggZD0iTTQzLjcgNC4xYy43OTMuMDM1IDEuNjEzLS4xIDIuMzguMTIyLjU3My4xNzYuODU0LjcyMS44NTMgMS4yMjMuMDA5IDIuODIyIDAgNS42NDMuMDA0IDguNDYzaC0zLjIwNWMuMDE2LTMuMjctLjAyMy02LjUzOC0uMDMyLTkuODA5bS0yOC42MTggMi40YTIuMjgxIDIuMjgxIDAgMCAwLTEuNDAzIDEuMTMyYy0uNjE2IDEuMjEtLjM4IDIuOTQ1LjkyIDMuNjcgMS4wMTUuNTYyIDIuNDc2LjI4NyAzLjEyMS0uNjY0LjctMS4wNC42NTYtMi41MjQtLjE4LTMuNDg1LS41ODctLjY1OC0xLjU5Ni0uODktMi40NTgtLjY1M20tLjQ1Ny0yLjMwNmMxLjY1My0uMjk2IDMuNDgxLjA0NiA0Ljc1MiAxLjEyNSAyLjA4IDEuNzM2IDIuMjE5IDUuMDg1LjM2NCA3LjAxMy0yLjAwNyAyLjExMS01Ljk4MiAyLjExLTcuOTYtLjAzOC0xLjkxLTIuMDI3LTEuNjM0LTUuNTkxLjcxNS03LjIxOGE1LjMxNCA1LjMxNCAwIDAgMSAyLjEzLS44ODIiIGZpbGw9IiNGRkYiLz48cGF0aCBkPSJNMjYuNDM3IDYuNDkxYy0uODMuMjEyLTEuNDQ4LjkwOC0xLjY0IDEuNjg0LS4yOTUgMS4xIDAgMi40NjQgMS4wOCAzLjA5NS44Ny41IDIuMDg3LjQxIDIuODM1LS4yNTQuNjMzLS41NS44Ni0xLjQwMi44MTktMi4xOS0uMDI5LS43NDMtLjM1LTEuNTEtLjk4Ny0xLjk2OS0uNTg2LS40MzgtMS4zOTUtLjU0Ni0yLjEwNy0uMzY2bS0uNTQ3LTIuMjg4YzEuNDUzLS4yNjcgMy4wNDMtLjA2OSA0LjI4Mi43MjZhNC42MjggNC42MjggMCAwIDEgMi4wNTYgMi44NDljLjM2NiAxLjU0MS4wMzUgMy4yNzQtMS4wODQgNC40NzktMS45NjQgMi4xNi01Ljk0MyAyLjIxLTcuOTY4LjEwMy0xLjgxNS0xLjg2MS0xLjc2NS01LjA3OC4xNC02Ljg2Ny42OTMtLjY2NSAxLjYxMi0xLjA5OCAyLjU3NC0xLjI5IiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTg3Ljk5MiA2LjQ3OWMtLjYyNC4xNS0xLjE2My41Ny0xLjQ1NiAxLjEwOS0uNTc5IDEuMDg3LS40NjIgMi41Ny41IDMuNDMzLjg3OC43OTUgMi40MjguNzQ1IDMuMjYzLS4wODUuNTQzLS41MzMuNzYtMS4yOTcuNzM0LTIuMDIzLS4wMDQtLjgwNC0uMzYtMS42NDYtMS4wNzUtMi4xMTQtLjU2My0uMzgtMS4zMDMtLjQ3LTEuOTY2LS4zMm0tLjQ1LTIuM2MxLjY1LS4yNzQgMy40NjYuMDg3IDQuNzE1IDEuMTggMi4wNDIgMS43NTIgMi4xNTggNS4wNzcuMzA0IDYuOTktMi4wMDIgMi4wOC01LjkyIDIuMDg1LTcuOTEtLjAxNC0xLjgxLTEuODkzLTEuNzI1LTUuMTU2LjI1MS02LjkxNy43Mi0uNjU0IDEuNjYtMS4wNzcgMi42NC0xLjI0IiBmaWxsPSIjMDBBREVGIi8+PHBhdGggZD0iTTYyLjY4NSA2LjE1Yy0uNjcuMjM4LTEuMDQuODktMS4xNTMgMS41MjEtLjE2Ljg0LS4wNDYgMS43ODQuNTEyIDIuNDgzLjcyLjkxNSAyLjQwOS45NjQgMy4xMzYuMDMyLjQ5NS0uNjU1LjUyLTEuNTA4LjQ2LTIuMjc5LS4wNi0uNjUtLjMzOC0xLjM3My0xLjAwMi0xLjY3N2EyLjcxIDIuNzEgMCAwIDAtMS45NTMtLjA4bS0xLjQ5MS0yLjI3YzEuNTI5LS41NzMgMy40NTMtLjQ2NCA0LjcyLjU5LjE3Ny0uMzI3LjQ4MS0uNjAyLjg3Ny0uNjY4LjU5Ny0uMDk1IDEuMjA2LS4wMyAxLjgwOC0uMDUuMDAyIDIuOTg0LjAwMSA1Ljk2Ny4wMDEgOC45NSAwIDEuMDktLjM1IDIuMjEzLTEuMTU4IDMuMDIxLTEuMDQyIDEuMDYzLTIuNjIgMS41MTEtNC4xMjUgMS41NTctMS40LjAyMi0yLjgxNC0uMjkyLTQuMDQzLS45My4yMzctLjU0MS40MjItMS4xMDcuNzE5LTEuNjI0LjE1LS4yNy40OS0uNDEuODA2LS4zNTcuNDk3LjA4NS45NjguMjgyIDEuNDc0LjM0MS44ODYuMTI0IDEuODkuMTA3IDIuNjM2LS40MTUuNTY3LS40MDUuNzQtMS4xMS43LTEuNzQ2LS45NDguNzQ2LTIuMjcuODc0LTMuNDUxLjY3My0xLjE4NS0uMjAzLTIuMjU3LS44OTctMi44ODgtMS44NTUtLjg1Ni0xLjI3OC0xLjAyMi0yLjg4LS43MDMtNC4zMzguMjktMS4zNTEgMS4yMy0yLjYzIDIuNjI3LTMuMTVNMy4wNSA4LjI4M2MtLjI5LjE3MS0uMzM3LjUxNS0uMzQ1LjgwOS0uMDAyLjg1Ny4wMDEgMS43MTQuMDAxIDIuNTcuODQyLS4wMDQgMS42ODYuMDA2IDIuNTMtLjAwMi41NzUtLjAxIDEuMTY0LS4yOTggMS40MzYtLjc4Ni40MS0uNzQuMzMtMS43OC0uMzcxLTIuMzQyLS41NzQtLjQ1Mi0xLjM2Ni0uMzk1LTIuMDY2LS40LS4zOTUuMDE2LS44MzUtLjA2MS0xLjE4Ni4xNU0yLjk3IDMuMTk0Yy0uMjM2LjE5NS0uMjU2LjUxLS4yNjUuNzg0LS4wMDIuNzA3LjAwMiAxLjQxMiAwIDIuMTE4LjczMy0uMDAzIDEuNDY2LjAxIDIuMi0uMDAzLjQzOC0uMDA4Ljg4MS0uMTg4IDEuMTUtLjUyLjUyOS0uNjc4LjQ5OS0xLjc5NC0uMjU2LTIuMzE2LS41MTctLjM1NC0xLjE4OC0uMjU1LTEuNzg3LS4yNy0uMzUuMDA3LS43NjgtLjA0NS0xLjA0Mi4yMDdtLTIuOTY4LS45OUMtLjA0NiAxLjQ2Ni42NzIuOCAxLjQ1Mi44MmgzLjU2NmMxLjE3MS4wMjUgMi40MS4zNDggMy4yMzggMS4xNjUgMS4yNzcgMS4yMzUgMS4yIDMuNDMyLS4xMTYgNC42MTctLjE1NS4xMzYtLjMxOC4yNi0uNDc5LjM5LjY3OC4zMTggMS4zMDUuNzc5IDEuNjQyIDEuNDMuNjEyIDEuMTcyLjUzOCAyLjY2Ni0uMjQgMy43NTUtLjg1NyAxLjE5NC0yLjQ1IDEuNy0zLjkyNyAxLjczLTEuNzEuMDA2LTMuNDIxIDAtNS4xMzMuMDAzVjIuMjAzIiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTcwLjc5MSAxMC43Yy45MjktLjI5IDEuOTgzLjQ1MyAyLjAzMyAxLjQzMi4wOTcuODYtLjU5IDEuNzA4LTEuNDUgMS43NjYtLjg0OC4xMDktMS42OS0uNTczLTEuNzYzLTEuNDMxLS4xMTEtLjc4LjQyLTEuNTggMS4xOC0xLjc2OCIgZmlsbD0iIzAwQURFRiIvPjwvZz48L3N2Zz4=) no-repeat;
left: 0;
right: 0;
margin: auto;
width: 110px;
height: 18px;
bottom: 10px;
}
/* booking.com Logo inside the button */

/* Description text of booking.com button */

.feedback-hotel__action-button span {
position: absolute;
top: 10px;
left: 0;
right: 0;
margin: auto;
}

/* Description text of booking.com button */

/* Container for modal window (with changes)*/

Inherited from div.feedback-hotel__popup
.feedback-hotel__popup {
position: fixed;
background: #fff;
z-index: 16;
left: 50%;
top: 50%;
margin-left: -255px;
margin-top: -189px;
width: 510px;
height: 378px;
border-radius: 5px;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.62);
padding: 0 80px;
text-align: center;
}

/* Container for modal window (with changes)*/

/* Container for compare button */

.feedback-hotel__compare {
font-size: .75rem;
line-height: 1.0625rem;
letter-spacing: .0125rem;
text-transform: uppercase;
}

/* Container for compare button */

/* Link to White Label */

.feedback-hotel__compare a {
color: #009eca;
}

/* Link to White Label */

How to automatically display an information block on the White Label website

The Travelpayouts White Label tool can display a block with any information, advertisement or image with a certain delay. This is an aggressive method, so use it carefully as to not cause a negative experience for your visitors.

Preparing for the addition of an extension

At first, add the jQuery library connection code to make everything work correctly. Open your White Label settings and go to the Sections tab.

Then add the following code to the Site footer block:

<script
 src="https://code.jquery.com/jquery-3.3.1.min.js"
 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 crossorigin="anonymous">
</script>

Please note! The jQuery library connection code is only added once. If you add other White Label extensions, you do not need to re-insert the code.

Adding an information block

Place the following code in the Site header section:

<div class="block-inform">
 Some text
</div>

Add the following code to the Site footer section to start displaying the block:

<script>
 window.onload = function() {
 setTimeout(function() { $(".block-inform").show(500); }, 5000);
};
</script> 

5000 in the setTimeout function means the time in milliseconds after which a pop-up window will appear once the White Label is opened.

Style setting

To change the style of the pop-up window, add a <style></style> tag to the Site footer block and place the following code inside the tag:

 .block-inform {
 position: fixed;
 top: 20px;
 right: 20px;
 background: #000;
 color: #fff;
 padding: 30px;
 display: none;
 }

You can change the style as you like. If you lack knowledge of CSS, find a freelance developer who can help you.

Settings for social networks

White Label is blocked from search engines for web indexing. The only exception is the front page. This is why the pages with search results initially had identical titles, keywords, and description meta tags. However, this approach does not work well if one has to send a link to social networks.

We added the support of special parameters that can help you to create templates for meta tags.

How to add parameters

To add a parameter to meta tags, open White Label settings and go to the Metadata tab. Select the type of page for which you want to add a template. For example, let’s add meta tags to a hotel page.

Add the required meta tags and parameters to the field of code input field. Example of final code:

<title>[:origin_name:] - [:destination_name:], [:dates:] - Flights search</title>
<meta name="description" content="From [:origin_name:] to [:destination_name:], [:dates:], [:passengers:], [:flight_class:]"/>
<meta property="og:title" content="I found a cheap flight ticket!" />
<meta property="og:description" content="From [:origin_name:] to [:destination_name:], [:dates:], [:passengers:], [:flight_class:]" />
<meta content="en_US" property="og:locale">
<meta content="product.group" property="og:type">
<meta content="[:og_image:]" property="og:image">
<meta content="I found a cheap flight ticket!" name="twitter:title">
<meta content="From [:origin_name:] to [:destination_name:], [:dates:], [:passengers:], [:flight_class:]" name="twitter:description">
<meta content="summsummary_large_imageary" name="twitter:card">

The parameters are added via the structure of the following type [:hotel_country:]. See the description of the parameters below.

Please note, if you need meta tags to be displayed in different languages, add these languages to the general White Label settings. After that, add the code to the Meta tab to all language blocks.

What is displayed instead of the parameters

Two types of parameters are supported in White Label, for plane tickets and hotels. Instead of showing each parameter on the summary page we’ll show its value.

Note! You don’t need to change or substitute anything in these parameters. All values are loaded automatically, depending on the content of the page.

Plane tickets

• [:flight_class:] — Flight class
• [:passengers:] — The number of passengers
• [:origin_name:] — The departure city in the Nominative case, for example, ‘Moscow’
• [:origin_from:] — The departure city in the ‘from City’ format, for example, ‘from Moscow’
• [:destination_name:] — The destination city in the Nominative case
• [:destination_to:] — The destination city in the ‘to City’ format
• [:trip_type:] — The type of flight (one-way or two-way)
• [:og_image:] — The image of the destination city
• [:dates:] — Departure and return dates together
• [:depart_date:] — Departure date
• [:return_date:] — Return date

Hotels

• [:guests:] — The number of guests
• [:hotel_city:] — The name of the city where the hotel is located or the city of the search
• [:hotel_city_iata:] — IATA city code where the hotel is located or the city of the search
• [:hotel_county:] — The country where the hotel is located (the grammatical cases are supported according to the same principle as in the case of cities)
• [:hotel_county_iata:] — IATA country code where the hotel is located
• [:hotel_name:] — Hotel name
• [:check_in:] — Check-in date
• [:check_out:] — Check-out date
• [:dates:] — Check-in and check-out dates together
• [:og_image:] — The image of the hotel

How to add Google AdSense to White Label

This article describes how to place Google AdSense code in White Label flight search results.

Open your AdSense account and create an ad.

You’ll get a code like:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
 style="display:inline-block;width:728px;height:90px"
 data-ad-client="ca-pub-0515363181603345"
 data-ad-slot="8813803962"
 data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Go to the White Label settings and place the following code in the Metadata section (select the Avia result page tab):

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=GOOGLE-DATA-AD-CLIENT"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align: center;"
data-ad-client="GOOGLE-DATA-AD-CLIENT"
data-ad-slot="GOOGLE-DATA-AD-SLOT"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Replace GOOGLE-DATA-AD-CLIENT on the value of the data-ad-client attribute, and GOOGLE-DATA-AD-SLOT on the value of the data-ad-slot attribute from your ad code.

Go to the Sections tab and place this code into the Site footer block (before the last </div>):

<script>
 setTimeout(function(){
var div = document.createElement("ins");
 div.setAttribute('class', 'adsbygoogle');
 div.setAttribute('data-ad-client', 'GOOGLE-DATA-AD-CLIENT');
 div.setAttribute('data-ad-slot', 'GOOGLE-DATA-AD-SLOT');
document.getElementById('ad_top_container').appendChild(div);
var js = document.createElement("script");
 js.setAttribute('src', 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
 js.setAttribute('async', '');
 document.head.appendChild(js);
setTimeout(function(){ 
 (adsbygoogle = window.adsbygoogle || []).push({}); 
 }, 1000);
}, 3000);
</script>

Save the changes. Now the Google AdSense ad will appear in the search results.

Links to the White Label with a completed search form

When working with White Label, you can create a link to the search form with already filled-in fields. Such links are convenient because users do not need to spend time filling out the form; they can go straight to booking.

To create such a link:

1. Take the address of your White Label and add /flights/ to it: AddressOfYourWhiteLabel/flights/

2. Add the parameters from the table below to the address. Please note that the first parameter is added to the address using the "?" question mark character, and all the others using the "&" character.

For example, take the address of your White Label and add to it /flights/?Origin_iata=BCN&destination_iata=LAX. When clicking through the link, the user enters to the search form with the filled-in points of departure and destination.

Parameters

Note:

• adults/children/infants – number of adults, children, and infants – numbers.
  Up to nine seat-occupying passengers (adults + children) can be added in a single query. Infants travel without their own seats and are carried by adults. The number of infants cannot exceed the number of adults. If the number of infants is larger than the number of adults, the excess number of infants is counted as children (with their own seats).

How to make a calendar open by default

To automatically expand the Low Fare Calendar in search results, open your White Label settings and go to the Sections tab.

At the bottom of the code block Site footer, place the following code:

<script>
setTimeout(function() { 
 TP_DISPATCHER.send('calendar_toggle')
 document.querySelector('[role="calendar_line--wrapper"]').classList.add('calendar_line--hide')
}, 5000);
</script>

As a result, the calendar automatically opens in 5 seconds after the start of the search:

How to implement a White Label in Wordpress

If you don't know what the White Label is, please check the article What is White Label by Travelpayouts.

Set up the White Label on Hosting

To implement a White Label in WordPress, set up a White Label on the subdomain.

Create the White Label and set up WordPress

Then install the plugin for WordPress to your website and paste the White Label name in the settings: 

After that, when users search or click on the widget or table data, they will see the search result on your White Label.

Error with SSL on White Label (Cloudflare)

If you receive a security warning in the browser using the HTTPS protocol with White Label, this can be caused by one of the following reasons:

• After the creation of the White Label passed less than 48 hours and the certificate didn’t update. Just wait a bit and check again by following the link of the form https:// your_white_label_name.
• On the site, you have links that lead to unprotected resources. For example, you posted the logo or a banner with a link to the image with http, not https. To fix this, change the link to the protected one.
• The cause may be the settings of the Cloudflare service, which many use to optimize the site. To resolve this situation, go to the Cloudflare settings in the Crypto section and select Full support for the SSL certificate.