can you please help me how to implement IAB Clicktab to GDN Banner (created with google web designer software). I just got notified by the media company that GDN Banners have been approved by the HTML5 Validator Tool, but have not been able to add click tag. Screenshot - Asset validation
I create DoubleClick environment for GDN, but I don't know where to implement a href link and create a banner to be clickable at all.
GDN:
<body>
<gwd-doubleclick id="gwd-ad" polite-load="">
<gwd-metric-configuration></gwd-metric-configuration>
<div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck">
<div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="160px" data-gwd-height="600px">
<div class="gwd-page-content gwd-page-size">
<img is="gwd-image" source="main_galaxy_wrapper.png" id="main_wrapper" class="gwd-img-bnpg gwd-gen-1mybgwdanimation">
<img is="gwd-image" source="disrupter.png" id="disrupter" class="gwd-img-1svs gwd-gen-gx3lgwdanimation">
<img is="gwd-image" source="logo.png" id="logo" class="gwd-img-1mfr">
<img is="gwd-image" source="bg.jpg" id="bg" class="gwd-img-l5ff gwd-gen-1by8gwdanimation">
<img is="gwd-image" source="galaxy.png" id="galaxy" class="gwd-img-n640 gwd-gen-1vlxgwdanimation">
<img is="gwd-image" source="cta.png" id="cta" class="gwd-img-1p26 gwd-gen-4kmrgwdanimation">
</div>
</div>
</div>
</gwd-doubleclick>
<script type="text/javascript" id="gwd-init-code">
(function() {
var gwdAd = document.getElementById('gwd-ad');
/**
* Handles the DOMContentLoaded event. The DOMContentLoaded event is
* fired when the document has been completely loaded and parsed.
*/
function handleDomContentLoaded(event) {
}
/**
* Handles the WebComponentsReady event. This event is fired when all
* custom elements have been registered and upgraded.
*/
function handleWebComponentsReady(event) {
// Start the Ad lifecycle.
setTimeout(function() {
gwdAd.initAd();
}, 0);
}
/**
* Handles the event that is dispatched after the Ad has been
* initialized and before the default page of the Ad is shown.
*/
function handleAdInitialized(event) {}
window.addEventListener('DOMContentLoaded',
handleDomContentLoaded, false);
window.addEventListener('WebComponentsReady',
handleWebComponentsReady, false);
window.addEventListener('adinitialized',
handleAdInitialized, false);
})();
</script>
<script data-exports-type="gwd-studio-registration">function StudioExports() {
}</script><script type="text/gwd-admetadata">{"version":1,"type":"DoubleClick","format":"","template":"Banner 3.0.0","politeload":true,"fullscreen":false,"counters":[],"timers":[],"exits":[],"creativeProperties":{"minWidth":160,"minHeight":600,"maxWidth":160,"maxHeight":600},"components":["gwd-doubleclick","gwd-image","gwd-page","gwd-pagedeck"],"responsive":false}</script></body></html>
This is different environment for banner (Xaxis) and I try with this solutio to add a href below open body tag, but still is Missing click tag check
<body>
<a href="https://streaming.grm-pro.com/__Vorlagen.HTML5/scripts/IAB.at.specs/iab.at.specs.txt" id="IAB_clicktag" target="_blank">
<gwd-genericad id="gwd-ad">
<div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck">
<div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="160px" data-gwd-height="600px">
<div class="gwd-page-content gwd-page-size">
<img is="gwd-image" source="main_galaxy_wrapper_xaxis.png" id="main_wrapper" class="gwd-img-bnpg gwd-gen-1mybgwdanimation">
<img is="gwd-image" source="disrupter_xaxis.png" id="disrupter" class="gwd-img-1svs gwd-gen-gx3lgwdanimation">
<img is="gwd-image" source="logo_xaxis.png" id="logo" class="gwd-img-1mfr">
<img is="gwd-image" source="bg_xaxis.jpg" id="bg" class="gwd-img-l5ff gwd-gen-1by8gwdanimation">
<img is="gwd-image" source="galaxy_xaxis.png" id="galaxy" class="gwd-img-n640 gwd-gen-1vlxgwdanimation">
<img is="gwd-image" source="cta_xaxis.png" id="cta" class="gwd-img-1p26 gwd-gen-4kmrgwdanimation">
</div>
</div>
</div>
</gwd-genericad>
</a>
<script>
document.getElementById('IAB_clicktag').setAttribute('href', getUriParams.clicktag);
</script>
<script type="text/javascript" id="gwd-init-code">
(function() {
var gwdAd = document.getElementById('gwd-ad');
/**
* Handles the DOMContentLoaded event. The DOMContentLoaded event is
* fired when the document has been completely loaded and parsed.
*/
function handleDomContentLoaded(event) {
}
/**
* Handles the WebComponentsReady event. This event is fired when all
* custom elements have been registered and upgraded.
*/
function handleWebComponentsReady(event) {
// Start the Ad lifecycle.
setTimeout(function() {
gwdAd.initAd();
}, 0);
}
/**
* Handles the event that is dispatched after the Ad has been
* initialized and before the default page of the Ad is shown.
*/
function handleAdInitialized(event) {}
window.addEventListener('DOMContentLoaded',
handleDomContentLoaded, false);
window.addEventListener('WebComponentsReady',
handleWebComponentsReady, false);
window.addEventListener('adinitialized',
handleAdInitialized, false);
})();
</script>
</body></html>
Can you help me how to hard coded that? Thank you in advance
Just add a clicktag in your banner with google web designer.
Check out the below documentation to add clicktag
https://support.google.com/webdesigner/answer/3263494?hl=en
https://adgear.atlassian.net/wiki/pages/viewpage.action?pageId=75104310
You can also check the banner with DCM valitor : https://h5validator.appspot.com
Related
Are you able to suggest how to generate an empty 'div' tag for a modal window when the page is rendered the first time?
'div' content will be fetched with ajax request.
I would like to avoid fetching modal window content twice - first when the page is rendered and then when I click on the link to show modal window.
I do not use wicket modal window implementation.
I have a base ModalBorder class.
ModalBorder.java
public class ModalBorder extends Border {
public ModalBorder(String id) {
super(id);
}
}
with ModalBorder.html markup
<wicket:border>
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<wicket:body/>
</div>
</div>
</wicket:border>
AboutAppModalPanel.java
public class AboutModalPanel extends Panel {
public AboutModalPanel(String id) {
super(id);
setOutputMarkupId(true);
var mb = new ModalBorder("modalBorder");
mb.setRenderBodyOnly(true);
add(mb);
}
}
AboutAppModalPanel.html
<wicket:panel>
<div wicket:id="modalBorder">
<article class="media">
<div class="media-content">
<div class="content">
<p>
<strong>
About application content
</strong>
</p>
</div>
</div>
</article>
</div>
</wicket:panel>
I would like to achieve the below output:
MainPage.html
Page is rendered first time (with empty div)
<html>
<body>
...
<div class="modal" id="aboutAppModalPanel2">
<!-- modal is empty and hidden (not-active) -->
</div>
</body>
</html>
and then requesting modal content via ajax request
<html>
<body>
...
<div class="modal is-active" id="aboutAppModalPanel2">
<!-- modal is filled in and SHOWN (added 'is-active' class) -->
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-content">
<div class="content">
<p><strong>About application content</strong>
...
</div>
</body>
</html>
but now I am facing this issue:
Page is rendered first time (with filled in div)
<html>
<body>
...
<div class="modal" id="aboutAppModalPanel2">
<!-- modal is filled in and HIDDEN (not-active) -->
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-content">
<div class="content">
<p><strong>About application content</strong>
...
</div>
</body>
</html>
and then requesting modal content via ajax request
<html>
<body>
...
<div class="modal is-active" id="aboutAppModalPanel2">
<!-- modal is filled in and SHOWN (added 'is-active' class) -->
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-content">
<div class="content">
<p><strong>About application content</strong>
...
</div>
</body>
</html>
Are you able to suggest a solution?
I use Wicket 9.
Add an empty WebMarkupContainer instead of your panel to the page, making sure you call setOutputMarkupId(true) so it can be refreshed in an ajax call. Then replace it with your panel in the Link's onClick(AjaxRequestTarget target) method.
thanks for a tip. I needed to change my implementation but now it works.
// In page constructor:
// Instead of empty WebMarkupContainer you suggested an empty panel with setOutputMarkupId(true)
add(new AjaxEmptyPanel("aboutApp"));
add(showAboutAppLink());
// and AjaxLink:
private AjaxLink<String> showAboutAppLink() {
return new AjaxLink<>("showAboutApp", new ResourceModel("SHOW")) {
private static final long serialVersionUID = -3035458028030059416L;
#Override
public void onClick(AjaxRequestTarget ajaxRequestTarget) {
var aboutApp = new AboutAppModalPanel("aboutApp");
aboutApp.setOutputMarkupId(true);
getPage().replace(aboutApp);
ajaxRequestTarget.add(aboutApp);
}
};
}
I'm having trouble posting my wysiwyg content to my controller in asp.net core. I can't seem to get any value from the form editor. The value for the Content property comes to the controller as null. I'm using the summernote form editor to handle my richtext box editor.
Here is my code
public class Editor
{
public int EditorId { get; set; }
public string Content { get; set; }
}
Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Editor editor)
{
if (ModelState.IsValid)
{
_context.Add(editor);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(editor);
}
View:
<h2>Create</h2>
<h4>Editor</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Content" class="control-label"></label>
<textarea asp-for="Content" id="summernote" name="editordata"></textarea>
<span asp-validation-for="Content" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
<script>
$(document).ready(function () {
$('#summernote').summernote();
});
</script>
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
}
#section Styles{
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
}
So the issue is when I post the form it's gets to the controller but the content comes over as null. I'm not sure how to post the content
Here are my thoughts, I'm thinking i'm missing a some attribute that allows html to come over the wire to my controller, but all the reserach i've found is that asp.net core doesn't require that. Or I need to handle this type of request in the middleware pipeline, but that doesn't make much sense since it's just html strings i'm sending over the wire to the controller.
It looks like the top of your view was not left out, I assume you have Editor as model.
The problem is on your text area you are using both asp-for and then setting the id and name to something that doesn't match your model property.
You should just use asp-for and let it decide the id and name instead of adding those yourself.
What is really getting posted is a string named editordata because you used that name on the textarea. remove that and it will be named Content to match the property of the model
You also don't need the [Bind] attribute shown in the controller action in your screenshot.
I have been sitting with the same issue and was able to resolve it due to Joe's answer!
Could I suggest working on the summernote class for the text area instead of using your id?
I noticed when I use the id that my textarea's display property doesn't get set to none, but it works when i use the class="summernote".
<textarea asp-for="Instructions" class="summernote"></textarea>
<script>
$(document).ready(function () {
$('.summernote').summernote();
});
</script>
Put this script in your page head:
<script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>
Lets say you have model called ForumModel where you save contents of editor. Property where you your content is saved is called answer:
public string Answer { get; set; }
So in your view you have following tag:
#model ForumModel
Therefore if you want to add editor:
<textarea id="editor1" asp-for="#Model.Answer" class="form-control" required=""></textarea>
<script>
CKEDITOR.replace("editor1");
</script>
And now all that is left is to call your controller on submit button. When your form is submitted you go to constructor that saves your contents.
public IActionResult Reply(ForumModel forumModel)
{
forumModel.SaveReply();
return RedirectToAction("SomeRandomPage");
}
I am trying to develop custom modal plugin for durandal 2.1 to have my own logic and abstract it from the rest of my app here is what I have so far but something does not work and modal gets inserted in DOM twice
define(['jquery', 'knockout', 'plugins/dialog'], function ($, ko, dialog) {
var modal = {
install: function (config) {
dialog.addContext("Modal", {
addHost: function (theDialog) {
var body = $("body");
$('<div id="Dialog" class="AlignC"><div class="ModalHost"></div></div>').appendTo(body);
theDialog.host = $('#Dialog').get(0);
},
removeHost: function (theDialog) {
alert("demoving host");
$("#Dialog").remove();
},
compositionComplete: function (child, parent, context) {
var theDialog = dialog.getDialog(context.model);
}
});
}
};
return modal;
});
and here is how i call it from my viewmodel
dialog.show(this, null, 'Modal');
can anyone tell me what is wrang with this code why my model ELEMENT is inserted twice and ovelay each other. how can i fix that.
second element does not have content inside.
by the way here is view I am trying to show inside modal
<span class="Loader"></span>
<div class="Modal">
<h2 class="Caps">SomeName</h2>
<div class="Row">
<input type="text" />
</div>
<div class="Desc">
description
<br />
XXY YYX XXY
</div>
<div class="Buttons">
<span class="Green">Check</span>
<span>Add</span>
</div>
</div>
Ok I managed to fix this behavior. the problem with click binding was firing twice and this was the problem associated with inserting tow HTML elements in DOM after fixing click handler, everything works just fine.
I have two forms on a page containing Google captcha code, but only one code works. Does anyone know if you can use the same code with the same key on two forms on the same page?,
Thks,
Yes, you can. But you have to explicitly render the widget as mentioned on the developer guide
you should use something like this on your front end(taken from the developer guide):
<html>
<head>
<title>reCAPTCHA demo: Explicit render for multiple widgets</title>
<script type="text/javascript">
var verifyCallback = function(response) {
alert(response);
};
var widgetId1;
var widgetId2;
var onloadCallback = function() {
// Renders the HTML element with id 'example1' as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to 'widgetId1'.
widgetId1 = grecaptcha.render('example1', {
'sitekey' : 'your_site_key',
'theme' : 'light'
});
widgetId2 = grecaptcha.render(document.getElementById('example2'), {
'sitekey' : 'your_site_key'
});
grecaptcha.render('example3', {
'sitekey' : 'your_site_key',
'callback' : verifyCallback,
'theme' : 'dark'
});
};
</script>
</head>
<body>
<!-- The g-recaptcha-response string displays in an alert message upon submit. -->
<form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
<div id="example1"></div>
<br>
<input type="submit" value="getResponse">
</form>
<br>
<!-- Resets reCAPTCHA widgetId2 upon submit. -->
<form action="javascript:grecaptcha.reset(widgetId2);">
<div id="example2"></div>
<br>
<input type="submit" value="reset">
</form>
<br>
<!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
<form action="?" method="POST">
<div id="example3"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
I just wanted a HTML snipped which I can insert multiple times, each time displaying another captcha. Also, I did not want to take care for specific IDs assigned to the containers, which would be very annoying when multiple formulars still appearing on one page will be designed and rendered independently. Here is my solution.
<div class="g-recaptcha"></div>
<script type="text/javascript"><![CDATA[
function renderCaptchas() {
var captchaNodes = document.getElementsByClassName('g-recaptcha');
for (var i = 0; i < captchaNodes.length; i++) {
var captchaNode = captchaNodes[i];
if (!captchaNode.captchaRendered) {
captchaNode.captchaRendered = true;
grecaptcha.render(captchaNode, {"sitekey": "YOUR_SITE_KEY"});
}
}
}
]]></script>
<script src="https://www.google.com/recaptcha/api.js?onload=renderCaptchas&render=explicit" async="async" defer="defer"></script>
I'm trying to create a Dojo dialog in Zend Framework but I've run into some problems. My view code looks something like this:
<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
data-dojo-config="async: true" dojoConfig = "parseOnLoad: true">
</script>
<script>
require(["dijit/registry", "dojo/ready", "dojo/dom", "dijit/Dialog", "dijit/form/Form"],
function(registry, ready, dom, Dialog){
ready(function() {
createDialog = function(titleText, contentText) {
var node = dojo.byId("foobar");
var myDialog = new Dialog({ title:"From Source Node" }, node);
myDialog.show();
};
});
});
</script>
<body class="claro">
<div data-dojo-type="dijit/Dialog" id="foobar" title="Foo!" style="display: none">
<p>I am some content</p>
</div>
</body>
The button code that loads the dialog looks as follows:
<button name="btnDialog" id="dialogbtn" type="button" onclick='createDialog();'>Open</button>
The first time the button is clicked the dialog opens as expected, but once the dialog is closed and the button is clicked again, the dialog doesn't open and I get the following error in the console.
Tried to register widget with id==foobar but that id is already registered.
What am I doing wrong?
Thanks
Figured it out. I think the form wasn't parsing correctly because the dojo-config was incorrect. Changed the javascript code as follows:
<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
data-dojo-config="async: true, parseOnLoad:true">
</script>
<script>
require(["dijit/registry", "dijit/Dialog"], function (registry)
{
createDialog = function createDialog()
{
registry.byId("foobar").show();
}
});
</script>
and the div as follows:
<body class="claro">
<div class="dijitHidden">
<div data-dojo-type="dijit.Dialog" data-dojo-props="title:'Foo!'" id="foobar">
<p>I am some content</p>
</div>
</div>
</body>
and now the dialog dijit is saved to the registry and it's working as expected