B2B Market Size Calculator
Powered by:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link norocket href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script norocket src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
@media screen and (max-width: 768px){
#result_button{
width:100%;
}
.calButtonContainer{
width:100%;
}
.mobile-only{
display:none;
}
}
::placeholder{
font-size: 24px;
opacity: 1;
padding-left: 0px
}
.select2-container .select2-search--inline .select2-search__field{
padding-bottom: 40px !important;
padding-top: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice{
background-color: #e4e4e4 !important;
width: auto !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:before{
padding-top: 3px;
font-size: 14px;
color: #527aba !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple{
border-bottom: 0px !important;
}
.select2-container--below.select2-container--open .select2-selection__rendered:after{
background: none;
}
.select2-container--default .select2-selection--multiple {
border-left: 0px !important;
border-right: 0px !important;
border-bottom: 0px !important;
border-radius: 0px !important;
}
#locationSelect + .select2-container--default .select2-selection--multiple {
border-top: 0px;
}
.field_box {
padding-bottom: 25px;
}
.select2-selection__choice {
}
.select2-selection__choice__display {
font-size: 16px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
border: 0px ;
border-radius: 20px;
padding-left: 30px ;
padding-right: 15px;
}
button.select2-selection__choice__remove{
padding-left: 10px !important;
border-right: 0px !important;
color: #527aba !important;
top: -2px !important;
}
.elementor-button-icon svg {
padding-top: 2px;
}
.elementor-button{
text-decoration: none !important;
fill: #FFFFFF;
color: #FFFFFF!important;
background-color: #527ABA;
border-radius: 0px 0px 0px 0px;
font-size: 24px;
padding: 12px 24px;
}
.elementor-button-link:hover{
border: 1px solid #000;
}
.elementor-button-link:focus{
border: 1px solid #000;
color: #262626 !important;
}
.elementor-button-link{
border: 1px solid transparent;
}
.elementor-button:hover{
text-decoration: none !important;
fill: #000000;
color: black!important;
background-color: #ffffff;
border-radius: 0px 0px 0px 0px}
.elementor-button-link:hover{
border: 1px solid #000;
}
@media screen and (min-width: 1200px)
{
.header-text{
width: 600px;
font-size:32px;
}
.header-block{
display: flex;
}
}
</style>
<div style="max-width: 700px; padding: 0px 0px 30px 0px; border-bottom: 1px solid #c6c6c6;" class="form-box">
<div class="header-block">
<p class="header-text"><b>B2B Market Size Calculator</b></p>
<span class="powered-by" style="font-size:13px; width: 100px; margin-top: -5px">Powered by:</span>
<i style="color: #0274B3; margin-left: 5px" aria-hidden="true" class="fab fa-linkedin"></i>
<img style="width: 80px; height: 30px; padding-left: 10px" decoding="async" width="470" height="207" src="https://directobjective.ca/wp-content/uploads/2024/10/DO-Logo-Revamp-High-Res-8-1.png" class="attachment-large size-large" alt="DO-Logo-Revamp-High-Res-8 (1)" >
</div>
<div style="max-width: 600px">
<span style="font-size: 24px"><b>Select your preferences:</b></span>
<br class="mobile-only">
<div class="field_box" style="display:none">Geographical Region(s)</div>
<select id="locationSelect" multiple="multiple" style="width: 100%;">
<!-- Options will be dynamically added here -->
</select>
<div class="field_box" style="display:none">Industries</div>
<select id="mySelect_industry" style="width: 100%;">
<!-- Options will be dynamically added here -->
</select>
<div class="field_box" style="display:none">Business Size</div>
<select id="mySelect_size" style="width: 100%;">
<!-- Options will be dynamically added here -->
</select>
<div style="border-bottom: 1px solid #aaa "> </div>
<!--
<div class="field_box">Job Function(s)</div>
<select id="mySelect_job" style="width: 570px;">
Options will be dynamically added here
</select>-->
<script norocket>
jQuery(document).ready(function () {
jQuery('#mySelect_size').select2({
multiple: true,
placeholder: "Business Size",
maximumSelectionLength: 5, // Set the maximum limit to 5 selections
language: {
maximumSelected: function () {
return 'You can only select 5 ranges';
}
}
});
// Fetch data from your WordPress endpoint
jQuery.ajax({
url: 'https://directobjective.ca/wp-json/custom/v1/linkedin-api-size/',
method: 'GET',
dataType: 'json',
success: function (data) {
// Call function to populate Select2 with API data
populateSelect2_size(data);
},
error: function (error) {
console.error('Error fetching data:', error);
}
});
});
function populateSelect2_size(data) {
// Clear existing options
jQuery('#mySelect_size').empty();
// Iterate through the data and add options to the select element
for (var i = 0; i < data.elements.length; i++) {
var optionText = data.elements[i].name;
var optionValue = data.elements[i].urn;
jQuery('#mySelect_size').append(new Option(optionText, optionValue));
}
}
</script>
<script norocket>
jQuery(document).ready(function () {
jQuery('#mySelect_industry').select2({
ajax: {
url: 'https://directobjective.ca/wp-json/custom/v1/linkedin-api-industry/',
dataType: 'json',
delay: 250,
data: function (params) {
var queryParameters = {
q: params.term
}
return queryParameters;
},
processResults: function (data) {
if (data && data.elements && Array.isArray(data.elements)) {
var industries = data.elements.map(function (industry) {
return {
id: industry.urn,
text: industry.name
};
});
return {
results: industries
};
} else {
console.error('Invalid data structure:', data);
// Handle the error or return an empty result
return {
results: []
};
}
},
cache: true,
},
placeholder: 'Industries',
multiple: true,
maximumSelectionLength: 5, // Set the maximum limit to 5 selections
minimumInputLength: 2, // Minimum characters before making a request
language: {
maximumSelected: function () {
return 'You can only select 5 industries';
}
}
});
});
</script>
<script norocket>
jQuery(document).ready(function () {
jQuery('#mySelect_job').select2({
multiple: true,
maximumSelectionLength: 5, // Set the maximum limit to 5 selections
language: {
maximumSelected: function () {
return 'You can only select 5 job functions';
}
}
});
// Fetch data from your WordPress endpoint
jQuery.ajax({
url: 'https://directobjective.ca/wp-json/custom/v1/linkedin-api-job/',
method: 'GET',
dataType: 'json',
success: function (data) {
// Call function to populate Select2 with API data
populateSelect2_job(data);
},
error: function (error) {
console.error('Error fetching data:', error);
}
});
});
function populateSelect2_job(data) {
// Clear existing options
jQuery('#mySelect_job').empty();
// Iterate through the data and add options to the select element
for (var i = 0; i < data.elements.length; i++) {
var optionText = data.elements[i].name;
var optionValue = data.elements[i].urn;
jQuery('#mySelect_job').append(new Option(optionText, optionValue));
}
}
</script>
<script norocket>
jQuery(document).ready(function() {
jQuery('#locationSelect').select2({
ajax: {
url: 'https://directobjective.ca/wp-json/custom/v1/linkedin-api-location/',
dataType: 'json',
delay: 250,
data: function (params) {
var queryParameters = {
q: params.term
}
return queryParameters;
},
processResults: function (data) {
var locations = data.elements.map(function(location) {
return {
id: location.urn,
text: location.name
};
});
return {
results: locations
};
},
cache: true
},
placeholder: 'Geographical Region(s)',
multiple: true,
maximumSelectionLength: 5, // Set the maximum limit to 5 selections
minimumInputLength: 2, // Minimum characters before making a request
language: {
maximumSelected: function () {
return 'You can only select 5 locations';
}
}
});
jQuery('#locationSelect').on('change', function() {
var locationValues = jQuery(this).val();
//jQuery("div.locationValue").text(locationValues.toString());
//console.log(locationValues);
// Perform additional actions with the selected values
});
jQuery('#mySelect_size').on('change', function() {
var sizeValues = jQuery(this).val();
//jQuery("div.sizeValue").text(sizeValues.toString());
//console.log(sizeValues);
// Perform additional actions with the selected values
});
jQuery('#mySelect_industry').on('change', function() {
var industryValues = jQuery(this).val();
//jQuery("div.industryValue").text(industryValues.toString());
//console.log(industryValues);
// Perform additional actions with the selected values
});
jQuery('#mySelect_job').on('change', function() {
var jobValues = jQuery(this).val();
//jQuery("div.jobValue").text(jobValues.toString());
//console.log(jobValues);
// Perform additional actions with the selected values
});
});
</script>
<div class="locationValue"> </div>
<div class="sizeValue"> </div>
<div class="industryValue"> </div>
<div class="jobValue"> </div>
<!-- Calculate button area here -->
<script norocket>
jQuery(document).ready(function($) {
var globalVariable = null ;
// Define a separate function for the click event logic
function handleCalculateClick() {
jQuery(".form-box").css("background-color", "#bfe8f2");
jQuery(".audience-box").css("background-color", "#ffffff");
jQuery(".audience-box").css("border", "1px solid");
jQuery(".audience-box").css("width", "370px");
jQuery(".audience-box").css("padding-top", "15px");
jQuery(".audience-box").css("padding-left", "10px");
jQuery(".calculate").text("Re-calculate");
jQuery(".reset").show();
console.log("GLobal " + globalVariable);
if ( globalVariable != null){
jQuery("div.audienceCount > p").text("Audience Count: " + globalVariable);
}
var sizeValues = jQuery('#mySelect_size').val();
// Encode each URN individually
var encodedArray = sizeValues.map(function (urn) {
return encodeURIComponent(urn);
});
var industryValues = jQuery('#mySelect_industry').val();
var jobValues = jQuery('#mySelect_job').val();
var locationValues = jQuery('#locationSelect').val();
var location = encodeURIComponent(locationValues.toString()).replace(/%2C/g, ',');
var industry = encodeURIComponent(industryValues.toString()).replace(/%2C/g, ',');
//var job = encodeURIComponent(jobValues.toString()).replace(/%2C/g, ',');
var size = encodedArray.toString().replace(/[!'()*]/g, function(c) {
return '%' + c.charCodeAt(0).toString(16);
});
//var selectedCriteria = "(include:(and:List((or:(urn%3Ali%3AadTargetingFacet%3Alocations:List("+ location +"))),(or:(urn%3Ali%3AadTargetingFacet%3AstaffCountRanges:List("+ size +"))),(or:(urn%3Ali%3AadTargetingFacet%3Aindustries:List(" + industry + "),urn%3Ali%3AadTargetingFacet%3AjobFunctions:List(" + job + "))))))";
var selectedCriteria = "(include:(and:List((or:(urn%3Ali%3AadTargetingFacet%3Alocations:List("+ location +"))),(or:(urn%3Ali%3AadTargetingFacet%3AstaffCountRanges:List("+ size +"))),(or:(urn%3Ali%3AadTargetingFacet%3Aindustries:List(" + industry + "))))))";
//jQuery("div.selectedCriteria").text(selectedCriteria.toString());
console.log(location);
// Make an API request with the selected targeting criteria
function concatenateSelectedOptions(selector) {
// Get the selected options
var selectedOptions = jQuery(selector).select2('data');
// Initialize an empty array to store text values
var textValues = [];
// Loop through selected options and push their text values to the array
for (var i = 0; i < selectedOptions.length; i++) {
textValues.push(selectedOptions[i].text);
}
// Concatenate the text values with a semicolon in between
var concatenatedText = textValues.join('; ');
// Return the result
return concatenatedText;
}
var locationText = concatenateSelectedOptions('#locationSelect');
var industryText = concatenateSelectedOptions('#mySelect_industry');
var sizeText = concatenateSelectedOptions('#mySelect_size');
jQuery("input.geo").val(locationText);
jQuery("input.industry").val(industryText);
jQuery("input.size").val(sizeText);
// Display loading spinner before making the AJAX request
$.ajax({
url: 'https://directobjective.ca/wp-json/custom/v1/linkedin-api/',
type: 'GET',
data: {
targetingCriteria: selectedCriteria
},
dataType: 'json',
beforeSend: function () {
// Show loading spinner before the request is sent
jQuery(".loading-spinner-container").show();
},
success: function(data) {
// Handle the API response data here
console.log('API Response:', data);
globalVariable = data.elements[0].total.toLocaleString();
jQuery("div.audienceCount > p").text("Audience Count: " + data.elements[0].total.toLocaleString());
jQuery("input.count").val(globalVariable);
},
error: function(error) {
console.error('Error fetching data:', error);
},
complete: function () {
// Hide loading spinner when the request is complete (either success or error)
jQuery(".loading-spinner-container").hide();
},
});
}
function disableButton() {
const resultButton = document.getElementById('result_button');
resultButton.style.pointerEvents = "none"; // Prevent click
resultButton.style.opacity = "0.5"; // Make it visually appear disabled
}
function enableResultButton() {
const resultButton = document.getElementById('result_button');
resultButton.style.pointerEvents = "auto";
resultButton.style.opacity = "1";
}
function preCalculateClick() {
disableButton();
var sizeValues = jQuery('#mySelect_size').val();
// Encode each URN individually
var encodedArray = sizeValues.map(function (urn) {
return encodeURIComponent(urn);
});
var industryValues = jQuery('#mySelect_industry').val();
var jobValues = jQuery('#mySelect_job').val();
var locationValues = jQuery('#locationSelect').val();
var location = encodeURIComponent(locationValues.toString()).replace(/%2C/g, ',');
var industry = encodeURIComponent(industryValues.toString()).replace(/%2C/g, ',');
//var job = encodeURIComponent(jobValues.toString()).replace(/%2C/g, ',');
var size = encodedArray.toString().replace(/[!'()*]/g, function(c) {
return '%' + c.charCodeAt(0).toString(16);
});
// Retrieve the selected data from the select2 element
var location_data = jQuery('#locationSelect').select2('data');
// Initialize an empty array to store the location texts
var formattedLocations = [];
// Loop through the selected data
jQuery.each(location_data, function(index, item) {
// Push the text of each selected location into the array
formattedLocations.push(item.text);
});
// Join the formatted locations with a semicolon
var location_result = formattedLocations.join(';');
// Retrieve the selected data from the select2 element
var industry_data = jQuery('#mySelect_industry').select2('data');
// Initialize an empty array to store the location texts
var formattedIndustry = [];
// Loop through the selected data
jQuery.each(industry_data, function(index, item) {
// Push the text of each selected location into the array
formattedIndustry.push(item.text);
});
// Join the formatted locations with a semicolon
var industry_result = formattedIndustry.join(';');
// Retrieve the selected data from the select2 element
var size_data = jQuery('#mySelect_size').select2('data');
// Initialize an empty array to store the location texts
var formattedSize = [];
// Loop through the selected data
jQuery.each(size_data, function(index, item) {
// Push the text of each selected location into the array
formattedSize.push(item.text);
});
// Join the formatted locations with a semicolon
var size_result = formattedSize.join(';');
// Initialize the preferences string
var preferences = "preferences=";
// Concatenate the results conditionally, ensuring no trailing or double semicolons
if (location_result) {
preferences += location_result;
}
if (industry_result) {
// Add semicolon if location_result exists
preferences += (location_result ? ';' : '') + industry_result;
}
if (size_result) {
// Add semicolon if either location_result or industry_result exists
preferences += ((location_result || industry_result) ? ';' : '') + size_result;
}
// Log or use the final concatenated preferences string
console.log(preferences);
//var selectedCriteria = "(include:(and:List((or:(urn%3Ali%3AadTargetingFacet%3Alocations:List("+ location +"))),(or:(urn%3Ali%3AadTargetingFacet%3AstaffCountRanges:List("+ size +"))),(or:(urn%3Ali%3AadTargetingFacet%3Aindustries:List(" + industry + "),urn%3Ali%3AadTargetingFacet%3AjobFunctions:List(" + job + "))))))";
var selectedCriteria = "(include:(and:List((or:(urn%3Ali%3AadTargetingFacet%3Alocations:List("+ location +"))),(or:(urn%3Ali%3AadTargetingFacet%3AstaffCountRanges:List("+ size +"))),(or:(urn%3Ali%3AadTargetingFacet%3Aindustries:List(" + industry + "))))))";
//jQuery("div.selectedCriteria").text(selectedCriteria.toString());
console.log(location);
// Make an API request with the selected targeting criteria
$.ajax({
url: 'https://directobjective.ca/wp-json/custom/v1/linkedin-api/',
type: 'GET',
data: {
targetingCriteria: selectedCriteria
},
dataType: 'json',
success: function(data) {
// Handle the API response data here
console.log('API Response:', data);
globalVariable = data.elements[0].total.toLocaleString();
//jQuery("div.audienceCount").text("Audience Count: " + data.elements[0].total.toLocaleString());
// Build the full URL
var newHref = "https://directobjective.ca/market-size-report/?" + "location=" + location_result + "&industries=" + industry_result + "&size=" + size_result + "&people=" + globalVariable;
// Set the href attribute of the button
jQuery('#result_button').attr('href', newHref);
enableResultButton();
},
error: function(error) {
console.error('Error fetching data:', error);
},
});
}
function reset() {
jQuery("#locationSelect").val('').change();
jQuery("#mySelect_industry").val('').change();
jQuery("#mySelect_size").val('').change();
jQuery("div.audienceCount p").text("");
globalVariable = null ;
jQuery(".form-box").css("background-color", "#ffffff");
jQuery(".audience-box").css("background-color", "#ffffff");
jQuery(".audience-box").css("border", "none");
jQuery(".calculate").text("Calculate");
jQuery(".reset").hide();
}
//var selectedCriteria = $(this).val();
jQuery('.calculate').on('click', handleCalculateClick);
jQuery('#mySelect_size').on('select2:select', preCalculateClick);
jQuery('#mySelect_size').on('select2:unselect', preCalculateClick);
jQuery('#locationSelect').on('select2:select', preCalculateClick);
jQuery('#locationSelect').on('select2:unselect', preCalculateClick);
jQuery('#mySelect_industry').on('select2:select', preCalculateClick);
jQuery('#mySelect_industry').on('select2:unselect', preCalculateClick);
jQuery('.reset').on('click', reset);
});
</script>
<div class="row-container" style="display:flex; margin-top:10px; flex-direction: row-reverse;
}">
<div class="calButtonContainer" style="">
<br>
<a href="#" id="result_button" target="_blank" class="elementor-button-link elementor-button elementor-size-sm" role="button" style="min-width: 285px; margin-top: 20px">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Submit</span>
<span class="elementor-button-icon elementor-align-icon-right">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"></path></svg> </span>
</span>
</a>
<p></p>
</div>
<!-- Result area here -->
</div>
</div>
</div>
<span style="font-size: 10px">Gruber Partners Inc. All rights reserved. Copyright 2003-2024 </span>
