I am new to Header Bidding.
I have created an Ad slot using Prebid-Header Bidding. I have mentioned the code below. I need to know that is it the right way to work with Header-Bidding.
Let me know if there are changes to be done for hosting it in server.
Prebid.js
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.cmd.push(function () {
googletag.pubads().disableInitialLoad();
});
pbjs.que.push(function () {
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: sendAdserverRequest
});
});
function sendAdserverRequest() {
if (pbjs.adserverRequestSent) return;
pbjs.adserverRequestSent = true;
googletag.cmd.push(function () {
pbjs.que.push(function () {
pbjs.setTargetingForGPTAsync();
googletag.pubads().refresh();
});
});
}
setTimeout(function () {
sendAdserverRequest();
}, PREBID_TIMEOUT);
</script>
<script>
(function () {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script>
googletag.cmd.push(function () {
googletag.defineSlot('/xxx/test.maalaimalar', [[300, 250], [300, 600]], 'div-gpt-ad-1460505748561-0').addService(googletag.pubads());
googletag.defineSlot('/xxx/test.maalaimalar', [[728, 90], [970, 90]], 'div-gpt-ad-1460505661639-0').addService(googletag.pubads());
googletag.defineSlot('/xxxx/prebidtest', [[970, 90], [970, 250], [300, 250], [728, 90], [160, 600], [300, 600], [1, 1]], 'div-gpt-ad-1503040981222-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
<div id='div-gpt-ad-1460505748561-0'>
<script type='text/javascript'>
googletag.cmd.push(function () { googletag.display('div-gpt-ad-1460505748561-0'); });
</script>
</div>
<h5>Div-2</h5>
<div id='div-gpt-ad-1460505661639-0'>
<script type='text/javascript'>
googletag.cmd.push(function () { googletag.display('div-gpt-ad-1460505661639-0'); });
</script>
</div>
<h5>Div-3(Prebid)</h5>
<div id='div-gpt-ad-1503040981222-0'>
<script>
googletag.cmd.push(function () { googletag.display('div-gpt-ad-1503040981222-0'); });
</script>
</div>
Thanks in Advance....
I think it will working perfectly but you need to add one more concept in your code.
First you need to add adunits with some adapter(Eg:APPNEXUS)
var adUnits = [{
code: 'div-gpt-ad-1460505748561-0',
sizes: [[300, 250], [300,600]],
bids: [{
bidder: 'appnexus',
params: {
placementId: '10433394'
}
}]
}];
Related
I'm still new to VueJS, and I cannot figure this one out.
I have a page that loads with axios from wordpress my posts:
export default {
data() {
return {
postsUrl: "https://localhost/wordpress/wp-json/wp/v2/news",
posts: [] as any[],
isLoading: false,
regex: /(<([^>]+)>)/gi,
errorCaught: false,
};
},
methods: {
getPosts() {
this.isLoading = true;
axios
.get(this.postsUrl, { params: { _embed: true } })
.then((response) => {
this.posts = response.data;
console.log("Pages retrieved!");
console.log(this.posts);
this.isLoading = false;
})
.catch((error) => {
console.log(error);
if (error) {
this.isLoading = false;
setTimeout(() => {
this.errorCaught = true;
}, 1100);
}
});
},
},
mounted() {
this.getPosts();
},
};
and the template
<template>
<div class="news-container">
<div class="loading">
<transition name="fadeLoading">
<div v-if="isLoading">Loading...</div>
</transition>
<transition name="fadeLoading">
<div v-if="errorCaught">There was an error loading news</div>
</transition>
</div>
<ul v-for="(index) in posts" :key="index" ref="posts">
<h1>
<router-link :to="index.slug" tag="div" key="page.id"
>{{ index.title.rendered }}
</router-link>
</h1>
<img
v-if="index._embedded['wp:featuredmedia']"
:src="index._embedded['wp:featuredmedia'][0].source_url"
/>
<p class="date">{{ index.date }}</p>
</ul>
</div>
</template>
This works fine, no problem with the Options API.
But when I want to convert this to the Composition API, the posts don't appear:
<script setup lang="ts">
import axios from "axios";
import { ref } from "vue";
import { onMounted } from "vue";
const postsUrl = "https://localhost/wordpress/wp-json/wp/v2/news";
var posts = ref([] as any);
const isLoading = ref(false);
const regex = /(<([^>]+)>)/gi;
const errorCaught = ref(false);
const getPosts = () => {
isLoading.value = true;
axios
.get(postsUrl, { params: { _embed: true, page: 1 } })
.then((response) => {
posts = response.data;
console.log("Pages retrieved!");
console.log(posts);
isLoading.value = false;
})
.catch((error) => {
console.log(error);
if (error) {
errorCaught.value = true;
}
});
};
onMounted(() => {
getPosts();
});
</script>
I suspect there is a misunderstanding on my part how refs work, because If I edit the <template> (and have npm run dev running the server), I can see that the posts appear.
Could you help me with what am I doing wrong and why?
Thank you for your time
Your mistake is here
posts = response.data;
When you use ref you have to use it with value. Change your code to this:
posts.value = response.data;
It should be working fine. For more detail you should check here:
https://vuejs.org/api/reactivity-core.html#ref
I want to output the data obtained from the server to the screen as an asynchronous update.
There is no default value, but I want to print it when it is different from the new one.
methods: {
message : function(){
},
updateMessage: function () {
const path = 'http://localhost:5000/process';
axios.get(path)
.then((res) => {
this.msg = res.data;
})
.catch((error) => {
// eslint-disable-next-line
console.error(error);
});
},
},
created() {
this.message();
this.$nextTick();
this.$forceUpdate();
}
};
There is no reaction.
In your example code you never call the updateMessage() function.
new Vue({
el: "#app",
data: {
msg: ''
},
methods: {
message: function() {},
updateMessage: function() {
const path = 'https://jsonplaceholder.typicode.com/posts/1';
axios.get(path)
.then((res) => {
this.msg = res.data.title;
})
.catch((error) => {
// eslint-disable-next-line
console.error(error);
});
},
},
created() {
this.message();
this.updateMessage();
this.$nextTick();
this.$forceUpdate();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>MSG: {{msg}}</div>
</div>
error:
vue.js:597 [Vue warn]: Error in created hook: "TypeError: handlers[i].call is not a function"
found in
---> <StageExecs>
vue.js
<div id="vue-job">
<div class="row">
<h3>test</h3>
<stage-execs></stage-execs>
</div>
</div>
<script>
Vue.component('jobs', {
delimiters: [ '[[', ']]' ],
props: ['job'],
data: function() {
return {
showExecs: false,
build_ids: []
}
},
created: {
stageExecs() {
url = "api/v2/exec?" + this.job.api_url + "&limit=10"
fetch(url)
.then(response => response.json())
.then(body => {
for(i=0; i<body.length; i++){
this.build_ids.push({
'id': JSON.stringify(body[i].build_id),
})
}
})
.catch( err => {
console.log('Error Fetching:', url, err);
return { 'failure': url, 'reason': err };
});
}
},
template: `
<ul id="example-1">
<li v-for="item in build_ids">
[[ item.url ]]
</li>
</ul>
`,
});
var v_root = new Vue({
delimiters: [ '[[', ']]' ],
el: '#vue-job',
data: {
job_exec: {{ job_exec|safe }},
}
});
I assume something is being called in the incorrect order here, but new to vue.js so not sure what I did wrong.
The problem is created() hook needs to be a method, not an object. See this working sandbox fix https://codesandbox.io/s/vue-template-e0dzj
created() {
url = "api/v2/exec?" + this.job.api_url + "&limit=10"
fetch(url)
.then(response => response.json())
.then(body => {
for(i=0; i<body.length; i++){
this.build_ids.push({
'id': JSON.stringify(body[i].build_id),
})
}
})
.catch( err => {
console.log('Error Fetching:', url, err);
return { 'failure': url, 'reason': err };
});
}
},
your data component should be an object, not a function, you replace it like below :
please check the doc as well : Declarative-Rendering
data: {
return {
showExecs: false,
build_ids: []
}
Look.
When data_a changes, getDataB will execute.
How to deal with this problem?
<template>
<div>
<div :data-a="data_a">
demo show params A
</div>
<div :data-b="getDataB()">
demo show params B
</div>
</div>
</template>
<script>
export default {
data () {
return {
data_a: 0,
datas: [
0, 1, 2, 3, 4
]
}
},
methods: {
getDataB () {
console.log('getDataB() called');
}
},
mounted () {
setInterval(function () {
this.data_a = parseInt(Math.floor(Math.random() * 10000000000));
}.bind(this), 1000);
}
}
</script>
First of all - switch to ES6 and avoid bind.
mounted () {
setInterval( () => {
this.data_a = parseInt(Math.floor(Math.random() * 10000000000));
}, 1000);
}
Then modify getDataB to make it computed:
computed: {
dataB () {
// do something with data_a
console.log('calc based on this.data_a in progress...')
return this.data_a*2 // ;)
}
},
I'm trying to POST a token and display the results as an ordered list. I would like the list to update onchange of the input. On page load the request POST is infinitely looping with error:
TypeError: ctrl.keys(...) is undefined
I suspect that my assumptions of how the data binding on the controller works are completely wrong.
//component
var tISM = {};
//model
tISM = {
Key: function(data) {
this.Id = m.prop(data.Id);
this.Name = m.prop(data.Name);
this.CreationTime = m.prop(data.CreationTime);
},
keys: function(token) {
return m.request({
method: "POST",
url: "key/list",
data: { "token": token },
type: tISM.Key
})
},
};
//controller
tISM.controller = function() {
// when this controller is updated perform a new POST for data by calling message?
var token = m.prop("xxx")
var keys = function() {
tISM.keys(this.token)
}
return { token, keys }
};
//view
tISM.view = function(ctrl) {
return m("div"), [
m("ol", ctrl.keys().map( function(key, index) {
return m("li", key.Id, key.Name, key.CreationTime)
})),
m("input", {
onchange: m.withAttr("value", ctrl.token)
})
]
};
//initialize
m.mount(document.getElementById("app"), tISM);
<script src="http://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Mithril App</title>
<script src="mithril.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
m.request() returns a deferred, not the value itself. I have a snippet below that shows one way of getting the values out. I explicitly replaced the m.request() with deferred calls under the hood, and a timeout rather than a post.
//component
var tISM = {};
//model
tISM = {
Key: function(data) {
this.Id = m.prop(data.Id);
this.Name = m.prop(data.Name);
this.CreationTime = m.prop(data.CreationTime);
},
keys: function(token) {
m.startComputation()
var d = m.deferred();
setTimeout(function() {
d.resolve([1,2,3]);
m.endComputation();
}, 1000);
return d.promise;
}
};
//controller
tISM.controller = function() {
// when this controller is updated perform a new POST for data by calling message?
var token = m.prop("xxx")
var keys = m.prop([]);
tISM.keys(this.token).then(keys)
return {
token: token,
keys: keys
}
return { token, keys }
};
//view
tISM.view = function(ctrl) {
return m("div"), [
m("ol", ctrl.keys().map( function(key, index) {
return m("li", key.Id, key.Name, key.CreationTime)
})),
m("input", {
onchange: m.withAttr("value", ctrl.token)
})
]
};
//initialize
m.mount(document.getElementById("app"), tISM);
<script src="http://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Mithril App</title>
<script src="mithril.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
My problem was I don't know javascript. This works:
//component
var tISM = {};
//model
tISM.Key = function(data) {
this.Id = m.prop(data.Id);
this.Name = m.prop(data.Name);
this.CreationTime = m.prop(data.CreationTime);
}
tISM = {
keys: function(token) {
return m.request({
method: "POST",
url: "key/list",
data: { "token": token },
type: tISM.Key
})
},
};
//controller
tISM.controller = function() {
this.token = m.prop("")
this.keys = m.prop([])
this.updateToken = function(token) {
this.token(token)
tISM.keys(this.token).then(this.keys)
}.bind(this)
};
//view
tISM.view = function(ctrl) {
return m("div"), [
m("input", {
oninput: m.withAttr("value", ctrl.updateToken)
}),
m("ol", ctrl.keys().map( function(key, index) {
return m("li", key.Id, key.Name, key.CreationTime)
})),
]
};
//initialize
m.mount(document.getElementById("app"), tISM);