Using ExitAPI in a HTML5 ad banner with parameters - javascript

I have created a banner for Adwords, using HTML5 with a form element, which accepts few inputs, like your preffered color, type, etc.
The whole banner is not clickable, only the submit button, which I achieved by adding "onclick="ExitApi.exit()"" to the button.
All of this works fine, but now my question is, how flexible is this ExitApi?
Whenever I click the submit button, I want to append the generated parameters to the final url, which is set through AdWords.
Using the adwords preview I can see that during the redirect the last parameter is 'adurl' which contains my final destination.
Editing this manually and just typing in the parameters helps me achieve what I want, but how would I be able to append using the ExitApi js library, if that's even possible?
I also tried using a CTA through GWD using something like 'gwd.actions.gwdDoubleclick.exitOverride('gwd-ad', 'clickTag', 'http://example.com/index.php?some=var'+params, true, true);', which hasn't worked and is also limiting as it forces the developer to set the url through the banner.
Any ideas are appreciated!
Thanks,
Edvinas

If anyone is stuck on this aswell, just an update.
I have contacted Google Adwords Support about this and here's their response:
Unfortunately, multiple exit URLs are not supported in the AdWords environment. Doubleclick, on the other hand, can handle them.
https://support.google.com/webdesigner/answer/4450409
There are many nice components in GWD which could use different URLs, but they can't be deployed in AdWords.

Related

Adding text to clipboard (or pasting to cursor) in Chrome extension V3

I'm building extension for Chrome using manifest V3. Interaction I'm trying to achieve is:
User clicks a button in context menu.
Extension communicates with the server and receives some string in response.
User clicks another button in context menu and said string gets pasted where their cursor is.
I see two ways I could achieve it and I'm not sure which one makes more sense (or how to get either to work, really):
One would be to have said string put into clipboard and then have user access it with paste command.
Second would be to have a separate context menu button which upon pressing pastes the string where the cursor is.
Either solution would work for me, however I prefer one that asks for less permissions from user (I'm already accessing storage, requests and context menus). So far I was also able to avoid using background workers and event pages, which provided some convenience when working with context menus - I'd like to keep it that way, but I'd rather have my extensions actually working ^^
Unfortunately Chrome documentation is rather confusing, bordering on circular, when explaining how to achieve something like this, especially within Manifest V3. How do I go about it?

Capture the state of a web page in a URL

I find myself having to interact with a web page that hides state in various places so that one cannot easily share it as a URL, for example this page which allows users to look up information from city zoning applications:
https://aca.cityofberkeley.info/community/Default.aspx
You can interact with the page all you want, but the URL in the location bar will remain the same as the above.
Currently, city staff provide users with instructions like "Load this URL, click on the 'Zoning' tab, enter DRCP2020-0010 under the 'Permit Number' field, click 'Search', then when the records come up, click 'Record Info' and then select 'Attachments' from the dropdown menu, then click on the PDF document that says '2020-10-21_DRCP_APP_PCKT_2801 Adeline.pdf'". I would like to be able to replace these instructions with a URL.
Another example is the website where video from city council meetings is archived:
http://berkeley.granicus.com/MediaPlayer.php?publish_id=cbebb4e6-5b83-11eb-920e-0050569183fa
It would be nice to be able to produce a link which brings up one of the meeting videos, and seeks to a certain timestamp like 53:40, so that I can refer to something specific that was said at a meeting.
Looking at the pages that are loaded when I follow the instructions in each case, I can see that there are some POST forms, cookies, hidden input fields, and so on.
Is there some kind of tool that I can use to create "deep links" to pages like these, that were generated using non-URL hidden state, which will allow me to quickly share what I'm looking at with another user?
What I'm seeking is similar to the frmget "bookmarklet", which changes the forms on a page to use GET instead of POST. Sometimes this succeeds in producing a URL which captures form submission query parameters. However, it doesn't work for these applications, for whatever reason.
This question is possibly related to the idea of capturing a web page's DOM state using "browser screenshots" and a script called html2canvas. A possible solution might involve getting and setting cookies in a bookmarklet. Ideally something that produces a normal "https://" URL would be ideal, but if it is impossible to solve the problem except by outputting a "javascript:" URL (bookmarklet) then that is acceptable to me (in spite of the security implications). Thanks.
That seems like not a programming matter. It seems like the site has some security issues as well.
QUESTION A: About Zoning
Here are some links you can use
Direct link to Zoning (I've found it via Advanced search from the site):
https://aca.cityofberkeley.info/CitizenAccess/Cap/CapHome.aspx?module=Planning&TabName=Planning&TabList=Home%7C0%7CBuilding%7C1%7CHousing%7C2%7CPlanning%7C3%7CFire%7C4%7CLicenses%7C5%7CPublicWorks%7C6%7CCurrentTabIndex%7C3
A strange link to the list of files (I've found it via downloading a file, then going to chrome://downloads, then right-clicking the file I've download. The link has been the following):
https://aca.cityofberkeley.info/CitizenAccess/FileUpload/AttachmentsList.aspx?iframeid=ctl00_PlaceHolderMain_attachmentEdit&module=Planning&isInConfirm=False&isdetail=True&isaccountmanager=False&isAdmin=True&isPeopleDocument=&agencyCode=BERKELEY&isForConditionDocument=N
It still doesn't give the direct link to the file, but it it gives the list of attachement of the previously opened Zoning record.
Currently I have no idea what file is triggered by javascipt:__doPostBack('attachmentList$gdvAttachmentList$ctl02$lnkFileName','').
In any case, based on what we have, step one, and then step two seems like minimize the path to download the file. I guess there could be a way to download the file directly, but I currently don't see any easy way. Maybe someone else could figure it out.
QUESTION B: About video
I've used an embed link that shows all the attributes that can be used.
There is a pretty strange but working way to give the exact timestamp. Change starttime from the link below:
https://berkeley.granicus.com/MediaPlayer.php?publish_id=cbebb4e6-5b83-11eb-920e-0050569183fa&starttime=0&stoptime=undefined&autostart=1
So replacing 0 for 3600 will rewind the video forward by one hour (3600 seconds):
https://berkeley.granicus.com/MediaPlayer.php?publish_id=cbebb4e6-5b83-11eb-920e-0050569183fa&starttime=3600&stoptime=undefined&autostart=1
The problem here is that ... you cannot rewind back manually that particular hour (it just gets kind cropped out). But it works to show the exact episode.
That's a pretty strange site.

Access input forms of an existing page using Javascript?

I'm playing around with Google Chrome Extensions and wanted to make one where you fill out a form beforehand. Then whenever, a certain URL is opened, it fills in the information you filled out. I can save the information, and track the tab URL with one of Google's packages. However, when the URL is loaded, how can I tell what form to put the saved strings into? I know how to use var.document.getElementById(""), and can see the ids when I inspect element, but since it's not my webpage, I can't link it to my JavaScript file, so it doesn't help. I've seen this been done before but just can't find the right tools. Any guidance to an answer would be appreciated.

Changing CSS with JS and saving change

I am creating a page that lets the user chose colours and various elements on the page will adopt the new colour. For example boxes to show the colour scheme selected. I've been using the code $('').css('background_colour',.....) and it works great.
The problem I have now is I made an example webpage which should use these various colours in the relevant sections of the page. For example, main text, background colour, etc. I can't use what I have been doing because none of the changes save and when I click the link that opens the example page it only shows the original colours I put in its CSS file. I figured the method I'm using doesn't isn't actually rewritting the CSS file because when I reload the page where the user selects colours every goes back to default.
If anyone can point me to places to read or suggest the best approach to changing the CSS file that is for a different page AND allows for those changes to be saved I would really help me out.
Hope my description makes sense
Thanks
You can use either cookies or html5 localstorage to store client preferences for your website.
It's plenty of different libraries on the Internet which can help you in this task.
Cookies libraries
https://code.google.com/p/cookies/
https://github.com/ScottHamper/Cookies
Localstorage library
http://www.jstorage.info/
I would suggest cookies if you need to read user preferences from your server side.
Otherwise you can go for localstorage.
if you want to use colors in relevant pages, you have to save your color change events in database or in sessions or in cookies.
Otherwise you can not save changes. Because web page is rendered again when you refresh the page.

Google Analytics Goal for selecting text on web page

I have a project page at http://fulldecent.github.io/cameralife/ and some users will "convert" by selecting this text on the page:
git clone https://github.com/fulldecent/cameralife.git
And hopefully they will paste this into a terminal :-)
I am looking for advice on how to fire a Google Analytics goal when this text is selected. Right now I am working with:
Attach to mouseup
Check createRange or window.getSelection
Fire Analytics goal
That technique is at: Selected text event trigger in Javascript
This approach is from 2010, and wanted to ask first. Is this the best approach with HTML5 or should I be using a more modern approach?
I would suggest looking at CopyPaste by Tynt. The main purpose is different (inserting your URL to copied text), but why wouldn't it allow firing an trackEvent request, which would subsequently record a conversion (assuming you would set up goal tracking based on specific event occurrence)

Categories