function ClientsTemplate(){
var header = '',
edit = 'Edit Info',
del = '',
manageRow = '
Manage Clients
'+ edit + del + ' ',
manageTable = '';
this.index = '' + header + manageRow + manageTable + '
';
this.fresh = 'Oh no! It appears that we have no clients here. We should add some. Try it out - it\'s simple!
';
}
function AdvertisersTemplate(){
var header = '',
switchAdvertiser = 'Switch to Advertiser',
edit = 'Edit',
del = '',
manageRow = 'Manage Advertisers
'+ switchAdvertiser + edit + del + ' ',
manageTable = '';
this.index = '' + header + manageRow + manageTable + '
';
this.fresh = 'Oh no! It appears that we have no advertisers here. We should add some. Try it out - it\'s simple!
';
}
function AgenciesTemplate(){
var header = '',
switchAgency = 'Switch to Agency',
edit = 'Edit',
del = '',
manageRow = 'Manage Agencies
'+ switchAgency + edit + del + ' ',
manageTable = '';
this.index = '' + header + manageRow + manageTable + '
';
this.fresh = 'Oh no! It appears that we have no agencies here. We should add some. Try it out - it\'s simple!
';
}
function SegmentsTemplate(){
var header = '',
view = 'View',
edit = 'Edit',
duplicate = '',
del = '',
manageRow = 'Manage Segments
' + view + edit + duplicate + del + ' ',
manageTable = '';
this.index = '' + header + manageRow + manageTable + '
';
this.fresh = 'Oh no! It appears that we have no segments here. We should add some. Try it out - it\'s simple!
';
}
function AdGroupsTemplate(){
var header = '',
edit = 'Edit',
del = '',
manageRow = 'Manage Ad Groups
' + edit + del + ' ',
manageTable = '';
this.index = '' + header + manageRow + manageTable + '
';
this.fresh = 'Oh no! It appears that we have no ad groups here. We should add some. Try it out - it\'s simple!
';
}
function BillingTemplate(){
var header = '',
tc = '',
overview = '{{# sidePanel }}Billing Overview:
Weekly budgets combined:
{{ weeklyBudgetsCombined }}
Payment History: more
{{# paymentHistory }}{{# pending }}
{{/ pending }}
{{ date }} | {{ description }} | view
{{/ paymentHistory }}
{{/ sidePanel }}',
section = '',
footer = '';
var paymentInfo = 'Payment info:
',
billingInfo = 'Billing address:
',
filledPayment = '{{# billing.basic.lastFour }}Payment info
{{/ billing.basic.lastFour }}';
var insertionInfo = 'We will verify your insertion order amount and complete the deposit of new credit into your account. For expedited service please contact us
',
insertionRow = 'I/O amount
';
var chargeHistory = 'Charge history:
{{# chargeHistory }}{{ date }}
{{# charges }}{{ campaignName }} | {{# success }}ID ({{ id }}) | {{ amount }}{{/ success }}{{^ success }}Declined{{/ success }}
{{/ charges }}{{/ chargeHistory }}
';
this.sidePanel = overview;
this.index = '' + header + section + footer + '
';
this.card = '' + filledPayment+ paymentInfo + billingInfo + '
';
this.insertionOrder = '' + insertionInfo + insertionRow + '
';
this.paymentHistory = '' + chargeHistory + '
';
}
function ManageAgencyTemplate(editState){
var actionName = editState === true ? 'Edit' : 'Create',
updateName = editState === true ? 'Save' : 'Create';
var status = 'Status:
',
name = 'Agency name:
',
notes = 'Notes:
',
agencyFee = 'Agency fee:
',
fixedFee = 'Fixed fee:
',
ioState = 'IO Client:
',
salesRep = 'Sales Rep:
',
setUsername = 'Set username:
',
setPassword = '{{^ id }}Set password:
{{/ id }}';
var header = '' + actionName + ' Agency
',
tc = '',
overview = '{{ title }}:
{{# info }}{{ title }}:{{ value }}
{{/ info }}',
section = '',
footer = '';
this.sidePanel = overview;
this.index = '' + header + section + footer + '
';
this.main = '' + status + name + notes + agencyFee + (core.isAdmin ? fixedFee : '') + ioState + salesRep + setUsername + setPassword + '
';
this.chargeHistory = 'Charge history:
{{# chargeHistory }}{{ date }}
{{# charges }}{{ campaignName }} | ID ({{ id }}) | {{ amount }}
{{/ charges }}{{/ chargeHistory }}|
';
}
function ManageSegmentsTemplate(editState){
var actionName = editState === true ? 'Edit' : 'Create',
updateName = editState === true ? 'Save' : 'Create';
var header = '' + actionName + ' Segment
',
tc = '',
overview = '{{# sidePanel }}{{title}}:
{{# info }}{{ title }}:{{ value }}
{{/ info }}{{/ sidePanel }}',
section = '',
footer = '';
var segmentName = 'Segment name:
',
targetConsumers = 'Target consumers:
',
previouslySpent = 'Previously spent between:
',
lastVisited = 'Last visited between:
';
var urlsVisited = 'URLs visited:
',
skusViewed = 'SKUs viewed:
',
includeParams = 'Include params:
',
excludeParams = 'Exclude params:
';
var meteoraStuff = targetConsumers + previouslySpent + lastVisited;
this.sidePanel = overview;
this.index = '' + header + section + footer + '
';
this.main = '' + segmentName + meteoraStuff + urlsVisited + skusViewed + includeParams + excludeParams +'
';
}
function UploadBannerAdsTemplate(){
var header = '',
footer = '{{# saveState }}';
var upload = 'Add banners:
Select file(s)
',
adGroup = 'Ad group:
',
landingPageURL = 'Landing page url:
',
result = 'Result:
![]()
';
var container = '' + upload + adGroup + landingPageURL + advancedAdsTemplate() + result + '';
var sidePanel = '{{# sidePanel }}Ads pending upload:
{{# ads }}{{ image.name }}
{{/ ads }}{{/ sidePanel }}';
this.index = '' + header + '
' + container + sidePanel + '' + footer + '
';
this.sidePanel = sidePanel;
this.footer = footer;
}
function ProductAdTemplate(){
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
fontStyle = '400 12px Arial';
context.font = fontStyle;
this.getTextWidth = getTextWidth;
this['300x250'] = function(){ return function(obj){
var productPriceWidth = context.measureText(obj.price).width;
var o = {
'config' : {
'width' : 300,
'height' : 250,
'views' : [
{ 'title' : 'Main', 'managerView' : true, 'save' : true, 'key' : 'jsUpgrade' },
{ 'title' : 'Re-position background', 'managerView' : true }
],
'updateItems' : {
2 : { 'title' : 'Logo Image', 'key' : 'logo', 'set' : 'src', 'type' : 'logo' },
4 : { 'title' : 'Product Name', 'key' : 'name', 'set' : 'content', 'type' : 'input' },
5 : { 'title' : 'Product Price', 'key' : 'price', 'set' : 'content', 'type' : 'input', 'fn' : getPrice },
6 : { 'title' : 'Sale Positioning', 'key' : 'price', 'set' : 'x', 'fn' : getSalePositioning, 'target' : 5 }
}
},
'template' : [
{ 'type' : 'rect', 'width' : 300, 'height' : 162, 'x' : 0, 'y' : 40, 'fill' : 'rgb(255, 255, 255)', 'views' : { '0' : true, '1' : true } },
{
'type' : 'image',
'scale' : true,
'src' : obj['imageURL'],
'x': 0, 'y' : 40,
'width' : 300,
'height' : 162,
'views' : {
'0' : true,
'1' : {
'adjustPosition' : {
'editorFn' : true
}
}
}
},
{
'type' : 'image',
'scale' : true,
'src' : obj['logo'],
'x': 0, 'y' : 0,
'width' : 300,
'height' : 40,
'views' : {
'0' : true
}
},
{ 'type' : 'rect', 'width' : 300, 'height' : 48, 'x' : 0, 'y' : 202, 'fill' : 'rgb(255, 255, 255)', 'views' : { '0' : true } }, //White box
{ 'type' : 'text', 'content' : getProductName(obj.name), 'x' : 12, 'y' : 214, 'fontFamily' : 'Arial', 'fontWeight' : 400, 'fontSize' : 14, 'lineHeight' : 1.4, 'fontColor' : '#000000', 'views' : { '0' : true } },
{ 'type' : 'text', 'content' : getPrice(obj.price), 'x' : 12, 'y' : 232, 'fontFamily' : 'Arial', 'fontWeight' : 800, 'fontSize' : 12, 'lineHeight' : 1.4, 'fontColor' : '#000000', 'views' : { '0' : true } },
{ 'type' : 'text', 'content' : 'On sale!', 'x' : getSalePositioning(getPrice(obj.price)), 'y' : 233, 'fontFamily' : 'Arial', 'fontWeight' : 400, 'fontSize' : 10, 'lineHeight' : 1.4, 'fontColor' : '#bf2b2b', 'views' : { '0' : true } },
{ 'type' : 'rect', 'width' : 90, 'height' : 34, 'x' : 202, 'y' : 208, 'fill' : 'rgb(191, 43, 43)', 'views' : { '0' : true } }, //White box
{ 'type' : 'text', 'content' : 'See More', 'x' : 212, 'y' : 214, 'fontFamily' : 'Arial', 'fontWeight' : 600, 'fontSize' : 16, 'lineHeight' : 1.4, 'fontColor' : '#ffffff', 'views' : { '0' : true } },
]
};
return o;
function getSalePositioning(s){ return getTextWidth(s) + 16; }
function getPrice(p){ return '$' + p; }
function getProductName(name){ if(isDefined(name) && name.length >= 24) return name.substr(0, 21) + '...'; else return name; }
}; }();
function getTextWidth(s){ return context.measureText(s).width; }
}
function TextAdTemplate(){
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
fontStyle = '700 32px Lato';
context.font = fontStyle;
this.getTextWidth = getTextWidth;
this['300x250'] = function(){ return function(obj){
var width = 300,
height = 250,
buttonRects = getButtonRects(),
o = {
'config' : {
'width' : width,
'height' : height,
'views' : [
{ 'title' : 'Main', 'managerView' : true, 'save' : true, 'key' : 'jsUpgrade' }
],
'updateItems' : {
2 : { 'title' : 'Title', 'key' : 'adTitle', 'set' : 'content', 'type' : 'input' },
3 : { 'title' : 'Text', 'key' : 'adText', 'set' : 'content', 'type' : 'input' },
4 : { 'title' : 'Button', 'key' : 'buttonText', 'set' : ['width', 'x'], 'fn' : getButtonPositioning, 'target' : 5 },
5 : { 'title' : 'Button Text', 'key' : 'buttonText', 'set' : ['content', 'x'], 'type' : 'input', 'fn' : getTextButtonValues }
}
},
'template' : [
{ 'type' : 'rect', 'width' : 300, 'height' : 191, 'x' : 0, 'y' : 0, 'fill' : 'rgb(21, 141, 212)', 'views' : { '0' : true, '1' : true } },
{ 'type' : 'rect', 'width' : 300, 'height' : 59, 'x' : 0, 'y' : 191, 'fill' : 'rgb(51, 51, 51)', 'views' : { '0' : true } }, //White box
{ 'type' : 'text', 'content' : obj.adTitle, 'x' : 18, 'y' : 21, 'fontFamily' : 'Lato', 'fontWeight' : 700, 'fontSize' : 32, 'lineHeight' : 1.4, 'fontColor' : '#ffffff', 'views' : { '0' : true } },
{ 'type' : 'postText', 'content' : obj.adText, 'x' : 22, 'y' : 76, 'maxWidth' : 252, 'fontFamily' : 'Lato', 'fontWeight' : 300, 'fontSize' : 20, 'lineHeight' : 1.4, 'fontColor' : '#ffffff', 'views' : { '0' : true } },
{ 'type' : 'roundedRect', 'width' : buttonRects.buttonWidth, 'height' : 31, 'x' : buttonRects.buttonX, 'y' : 205, 'fill' : 'rgb(255, 138, 0)', 'radius' : 3, 'stroke' : false, 'views' : { '0' : true, '1' : true } },
{ 'type' : 'postText', 'content' : getButtonText(obj.buttonText), 'x' : buttonRects.textX, 'y' : 208, 'maxWidth' : 180, 'fontFamily' : 'Lato', 'fontWeight' : 500, 'fontSize' : 15, 'lineHeight' : 1.4, 'fontColor' : '#ffffff', 'views' : { '0' : true } }
]
};
return o;
function getDotComPositioning(){ return 18 + getTitleWidth() + 2; }
function getProductName(name){ if(isDefined(name) && name.length >= 24) return name.substr(0, 21) + '...'; else return name; }
function getButtonText(s){ var v = isDefined(s) ? s : 'Button Text'; return '> ' + v.toUpperCase(); }
function getButtonPositioning(){
var o = getButtonRects();
return { 'x' : o.buttonX, 'width' : o.buttonWidth };
}
function getTextButtonValues(){ return { 'x' : getButtonRects().textX, 'content' : getButtonText(obj.buttonText) }; }
function getButtonRects(){
var tw = getButtonTextWidth(),
padding = 18,
w = tw + (18 * 2),
bX = (width - w) / 2,
tX = bX + padding;
return {
'buttonX' : bX,
'buttonWidth' : w,
'textX' : tX
};
}
function getButtonTextWidth(){ context.font = '500 16px Lato'; return getTextWidth(getButtonText(obj.buttonText)); }
function getTitleWidth(){ context.font = '700 32px Lato'; return getTextWidth(obj.adTitle); }
}; }();
function getTextWidth(s){ return context.measureText(s).width; }
}
function CreateDynamicAdsTemplate(){
var header = '';
function stepOne(){
var tmplContainer = '
{{ buttonText }}';
return 'Step 1.) Select your dynamic template
{{# adTemplates }}' + tmplContainer + '{{/ adTemplates }}';
}
function stepTwo(){
var adGroup = 'Ad group:
',
logo = 'Logo area image:
Select file
',
buttonText = 'Button text:
',
backupBanner = 'Backup banner:
Select file
',
backupLandingUrl = 'Backup landing page url:
',
customize = 'Step 2.) Customize your dynamic template
' + adGroup + logo + buttonText + backupBanner + backupLandingUrl + advancedAdsTemplate() + '',
preview = 'Preview ad:
' + adTemplate() + '',
footer = '';
return '' + customize + preview + footer + '';
}
function adTemplate(){
var logo = 'Logo area ({{ logoWidth }}x{{ logoHeight }})
',
product = '',
productName = 'Product name here{{# extendedName }} Product name extended...{{/ extendedName }}
',
productPrice = 'Product price here
',
content = '' + productName + productPrice + '
',
preImageContent = '{{# preImageContent }}' + content + '{{/ preImageContent }}',
postImageContent = '{{# postImageContent }}' + content + '{{/ postImageContent }}',
footerContent = '{{# footerContent }}' + content + '{{/ footerContent }}',
footer = '';
return '' + logo + preImageContent + product + postImageContent + footer + '';
}
function adTemplatePreview(){
var logo = '',
pContent = 'Product Name
$Product Price
',
preic = '{{# preImageContent }}' + pContent + '{{/ preImageContent }}',
product = '',
posic = '{{# postImageContent }}' + pContent + '{{/ postImageContent }}',
footerBtn = '',
footer = '';
return '' + logo + preic + product + posic + footer + '';
}
this.index = '' + header + '
';
this.stepOne = stepOne();
this.stepTwo = stepTwo();
this.adTemplate = adTemplate();
this.adTemplatePreview = adTemplatePreview();
this.hidden = '';
}
function advancedAdsTemplate() {
var availableMacros = ' Available Macros:
{{AdID}} - Ad ID {{CampaignID}} - Campaign ID {{UUID}} - User ID {{Width}} - Width of ad {{Height}} - Height of Ad {{Size}} - Width x Height {{Domain}} - Impression Domain {{PageURL}} - Impression Page {{Referrer}} - Referring URL {{Cachebuster}} {{ClickURL}} - Ad Click URL {{EncodedClickURL}}
',
impTrack = 'Imp Tracker:
',
clickTrack = 'Click Tracker:
';
return 'Advanced:
|
' + availableMacros + impTrack + clickTrack + '
';
}
function DomainListsTemplate(){
var type = 'List Type:
',
domains = 'Domains:
',
header = '',
edit = 'Edit',
del = '',
manageRow = 'Manage Domain Lists
' + edit + del + ' ',
manageTable = '';
this.index = '' + header + manageRow + manageTable + '
';
this.fresh = 'Oh no! It appears that we have no domain lists here. We should add some. Try it out - it\'s simple!
';
this.edit = 'List Name:
' + type + domains;
}