Getting 'image_overlay_spec' to work Facebook Dynamic Ad Creative - javascript

I'm trying to get 'image_overlay_spec' to work when creating Facebook Dynamic ADs. I've already gotten the templating for the actual ad itself to work, but I want to also be able to have info on top of the image.
object_story_spec: JSON.stringify({
page_id: process.env.FB_PAGE_ID,
template_data: {
description: '{{product.description}}',
link: 'REDACTED',
name: '{{product.name | titleize}}',
},
}),
image_overlay_spec: JSON.stringify({
text_template_tags: ['{{product.price}}'],
text_type: 'price',
theme_color: 'background_e50900_text_fffff',
}),
This is what I have right now. The object_story_spec works as expected, but the image_overlay_spec does not. The API doesn't have any concrete examples on how to make it work.

Found it!
object_story_spec: JSON.stringify({
page_id: process.env.FB_PAGE_ID,
template_data: {
description: '{{product.description}}',
link: 'redacted',
name: '{{product.name | titleize}}',
},
image_overlay_spec: JSON.stringify({
overlay_template: 'pill_with_text',
text_font: 'droid_serif_regular',
text_type: 'price',
position: 'top_right',
theme_color: 'background_e50900_text_fffff',
float_with_margin: 'true',
}),
}),

Related

MapBox JS having issues connecting the data csv/google sheets files in our config.js code

We are working on a map with multiple points and trying to add a filter to it. Similar to this documentation: https://labs.mapbox.com/education/impact-tools/finder-with-filters/. Where we use a csv data file to add/update the location information.
We originally tried using the CSV: './Sample_Data.csv', line in our config.js file, but we were getting an error that said "XMLHttpRequest cannot load Sample_Data.csv due to access control checks.", and we are not sure what that error is or how to fix it.
config.js file with CSV code to link:
'use strict';
// eslint-disable-next-line no-unused-vars
const config = {
style: 'mapbox://styles/mapbox/light-v10',
accessToken:
'pk.eyJ1IjoicmItZmlkZWxpdHkiLCJhIjoiY2wyNjdjeTlkMXd3dTNjanIzb2h2bDN1cCJ9.diGkmbkrJJRQegleKOHhhA',
CSV: './Sample_Data.csv',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-120.234, 47.398],
zoom: 5,
title: 'Replace with your title',
description:
'Replace with information about your application. Ex. You can search by address to sort the list below by distance. You can also filter the list by language support options, which days a location is open, and whether they have devices to use to complete the survey by phone or online.',
sideBarInfo: ['Location_Name', 'Address', 'Phone'],
popupInfo: ['Location_Name'],
filters: [
{
type: 'dropdown',
title: 'Languages supported: ',
columnHeader: 'Languages',
listItems: [
'Amharic',
'ASL',
'Cambodian',
'Chinese',
'Danish',
'English',
'French',
'German',
'Greek',
'Hindi',
'Italian',
'Japanese',
'Korean',
'Language Line Services',
'Norwegian',
'Oriya',
'Portuguese',
'Punjabi',
'Russian',
'Somali',
'Spanish',
'Swedish',
'Tagalog',
'Thai',
'Tigrinya',
'Tongan',
'Vietnamese',
'Ukranian',
'TEST'
],
},
{
type: 'checkbox',
title: 'Devices available: ',
columnHeader: 'Devices_available', // Case sensitive - must match spreadsheet entry
listItems: ['Computer', 'Wi-Fi', 'Adaptive Laptops'], // Case sensitive - must match spreadsheet entry; This will take up to six inputs but is best used with a maximum of three;
},
{
type: 'dropdown',
title: 'Clients: ',
columnHeader: 'Clients',
listItems: [
'Adults',
'Disabled',
'Homeless',
'Immigrants/Refugees',
'Low Income',
'Seniors',
'Youth: Pre-teen',
'Youth: Teen',
],
},
],
};
We also tried making a Google Sheet of the csv data, that we can use and update, but are not sure where we can place the code correctly, in our config.js file for it to connect to the sheet and use its data.
From the documentation that we read on Sheet Mapper: https://labs.mapbox.com/education/impact-tools/sheet-mapper/, we got this code:
$(document).ready(function () {
$.ajax({
type: "GET",
//YOUR TURN: Replace with csv export link
url: 'https://docs.google.com/spreadsheets/d/1DbFiU7vOnFFBI57HHjOOSZcRxoH7hbErn7kTlm3kwiw/gviz/tq?tqx=out:csv&sheet=FIDELITY-MAPBOX-DATA',
dataType: "text",
success: function (csvData) { makeGeoJSON(csvData); }
});
Either method we can't get to work and are stuck how to proceed.
Thank you for any help.

How to route to my posts internally with nuxt

Trying to pass internal links in my template, but it does not direct to the links.
<nuxt-link
to="blog.url"
>{{ blog.title }} by {{ blog.author }}</nuxt-link
>
And in my data I have this (where blog.title and blog.author correctly work)
data() {
return {
blog: [
{ url: '/blog1', title: 'my first title', author: 'Brad' },
{ url: '/blog2', title: 'my second title', author: 'James' },
{ url: '/blog3', title: 'my third title', author: 'Tom' }
]
}
}
The output from the nuxt-link is simply "blog.url" and does not route anywhere. How to make it route to my internal links specified per blog1, blog2, blog3?
You want :to, not to. Without the colon, you’re pointing to the string “blog.url”, not your data.

Request to promote iOS App in Facebook via Marketing API

I have the facebook application with approved ads_read, manage_pages ads_management, business_management and Ads Management Standard Access permissions.
I can create Ad campaign, ad set and can upload asset to Facebook via Facebook Marketing API.
I create ad set with such parameters:
{
name: 'adset_name',
campaign_id: '<campaign_id>',
lifetime_spend_cap: 11000,
promoted_object: {
application_id: '<fb_app_id>',
object_store_url: 'https://itunes.apple.com/app/<my_app>',
page_id: '<page_id>',
},
billing_event: 'IMPRESSIONS',
optimization_goal: 'APP_INSTALLS',
bid_amount: 20000,
targeting: {
age_min: 20,
age_max: 25,
genders: [1],
locales: [6],
user_os: ['iOS_ver_11.0_and_above'],
geo_locations: {
countries: ["US"],
},
excluded_geo_locations: {
countries: ["GB"],
},
publisher_platforms: 'facebook',
facebook_positions: ['feed'],
},
device_platforms: 'mobile',
pacing_type: 'standard',
status: 'PAUSED',
end_time: '2019-07-30 23:59:59-07:00',
};
I create ad creative with such fields:
{
object_type: 'APPLICATION',
status: 'ACTIVE',
name: 'hello',
title: 'foo',
object_story_spec: {
page_id: '<facebook page id associated with app>',
photo_data: {
image_hash: asset_hash,
caption: 'Just image',
},
},
application_id: '<app store app id>',
object_store_url: 'https://itunes.apple.com/app/<my app same as application_id>',
}
The problem is, when I try to create ad with parameters:
{
name: 'Heyyy',
campaign_id,
adset_id,
creative: {
creative_id,
},
status: 'PAUSED',
}
I got error
Object Store URL does not match promoted object: Please ensure that the object store URL associated with your ad creative matches the object store URL set on your promoted object.
If I look to my Facebook business manager -> Ads manager, I see created ad set which is linked to app, page and iOS application.
Everything looks like if I create ad set by my own, not script.
So, I'm pretty sure that ad set creates correctly.
But I can't figure out how to create ad creative to make it work.
I have this problem for 2 weeks from now, and here is my question about ad creative error.
P.S. Here is links to my questions on facebook community forum, if it could help to clear the situation link, link, link, link
8 days past, and I finally found out how to make it.
You can find info on this link
And now my AD Creative params looks like this:
{
object_type: 'APPLICATION',
status: 'ACTIVE',
name: 'hello',
title: 'foo',
object_story_spec: {
page_id: '<fb_page_id>',
link_data: {
call_to_action: {
type: 'INSTALL_MOBILE_APP',
value: {
link: 'https://itunes.apple.com/app/<app>',
},
},
image_hash: 'image hash',
link: 'https://itunes.apple.com/app/<app>',
message: 'Message',
},
},
}

IOS Standalone Web App Facebook Share Error 104

In one of my Web App, I have to integrated Facebook Share Feature. It is working fine for normal Web APP. Following is the code:
FB.ui({
method: 'feed',
name: "App Name",
link: "App Links",
description: "My Description",
picture: "image",
show_error: true,
display: 'popup'
},
function (response) {
console.log(response);
}
);
It is properly sharing my content to Facebook, however in iPhone, when I select web app to Add To Home Screen, and then try to share link from the app added in home screen, it is giving error of 104.
I have attached screenshot for reference
Any idea, how can I resolve this issue or if I am missing something?
Thanks for your time.
Finally able to resolve this using URL Redirection as described here:
So here is my code.
I first determine if app is standalone or now and accordingly use the corresponding code
if(!standaloneApp) {
FB.ui({
method: 'feed',
name: "App Name",
link: "App Links",
description: "My Description",
picture: "image",
show_error: true,
display: 'popup'
},
function (response) {
console.log(response);
}
);
} else {
var fbShareOptions = {
app_id: fbAppId,
name: "App Name",
link: "App Links",
description: "My Description",
picture: "image",
display: 'popup'
};
window.open('https://www.facebook.com/dialog/feed?'+jQuery.param(fbShareOptions),'_blank');
}
Hope it helps someone.
Thanks

access to a related collection in an ember-model object via hasMany relationship

I may fundamentally be misunderstanding how to use the hasMany relationships in Ember/ember-model.
the ember-model readme has the following example
postJson = {
id: 99,
title: 'Post Title',
body: 'Post Body',
comments: [
{
id: 1,
body: 'comment body one',
},
{
id: 2,
body: 'comment body two'
}
]
};
App.Post = Ember.Model.extend({
id: Ember.attr(),
title: Ember.attr(),
body: Ember.attr(),
comments: Ember.hasMany('App.Comment', {key: 'comments', embedded: true})
});
App.Comment = Ember.Model.extend({
id: Ember.attr(),
body: Ember.attr()
});
presumably, one would do the following
post = App.Post.create();
post.load(1, postJson);
given the above, now we have access to various post props via get (i.e. post.get('title')), but how to I access the comments?
post.get('comments') returns an object, but it is not a collection of App.Comment objects, which is what I'd expect.
Thanks in advance for any and all help.
It returns a collection object which is iterable, but not an array. I'm working up an example with your code, I'll post it up momentarily (I'm pretty sure load is a private method and you should be using load on the model definition, then find).
App.Post.load(postJson); //sideloading
return App.Post.find(99);
http://jsbin.com/hocopoga/1/edit

Categories