For the time being, it appears that no one at Facebook nor Google have added Facebook tracking pixel into amp-analytics yet.
Does anybody here knows how to do it ? sample code or github is preferred.
thank you very much
This should work
<amp-pixel src="https://www.facebook.com/tr?id=YOUR_ID&ev=PageView&noscript=1"
layout="nodisplay"></amp-pixel>
You will need to change YOUR_ID to the ID you can find in Facebook's tracking code.
I created this by adopting the noscript src from their sample script for use in amp-pixel. More advanced usages would be possible, but ideally Facebook would provide the respective documentation.
It seems support was added on June 6, 2017. You can do:
<!-- Facebook Pixel Analytics tracking -->
<amp-analytics type="facebookpixel" id="facebook-pixel">
<script type="application/json">
{
"vars": {
"pixelId": "YOUR_ID"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
<!-- End Facebook Pixel Analytics example -->
The documentation can be found here.
Related
Does anyone know if there's a service to check if an IP address is in the EU? I'm trying to implement a cookie notification on my website but I only want to show it if it's required by law.
I'm trying to implement this using AMP, and it gives the option to use a URL to check if the notification should be displayed. I know this is probably a long shot, but it needs to return a result like this: (based on the URL the request came from).
{
"showNotification":true
}
I'll probably just end up creating something, just wanted to check on the off chance that someone already did
I just figured out how to do this with amp-geo - I thought I'd share the answer in case anyone else came across it:
Include these JS files:
<script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
<script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
Include this code:
<amp-geo layout="nodisplay">
<script type="application/json">
{
"ISOCountryGroups": {
"ineu": ["al","ad","at","az","by","be","ba","bg","hr","cy","cz","dk","ee","fi","fr","ge","de","gr","hu","is","ie", "it","kz","xk","lv","li","lt","lu","mk","mt","md","mc","me","nl","no","pl","pt","ro","ru","sm","rs","sk", "si","es","se","ch","tr","ua","gb","va"]
}
}
</script>
</amp-geo>
<amp-user-notification id="cookie-notif" layout="nodisplay" data-show-if-geo="ineu">
<div>
This site uses third-party cookies, learn more or <a on="tap:cookie-notif.dismiss" class="ampstart-btn caps ml1">accept</a>
</div>
</amp-user-notification>
Summary
I'm trying to figure out how to make HTML snippet with ATTRIBUTE typeahead (intellisense) as well. We have a web component and all Tags and attributes associated to tags are documented. What is the easiest way to implement this?
Example
We have a top level zing-grid tag. This tag has many attributes. For the following example I want typeahead for the caption attribute. The caption attribute should ONLY appear when I have a prefix of <zing-grid.
This issue is similar to How to insert html attribute snippet in jsx in vscode. In that example div has class intellisense. In this case I want the same typeahead implementation on my custom web component for the caption attribute.
Current POC snippet syntax
How do I make sure caption attribute is ONLY captured within the zing-grid tag
vue.code-snippets file
{
"zing-grid": {
"prefix": "<zing-grid",
"body": [
"<zing-grid \n\t$0></zing-grid>"
],
"description": "ZingGrid top level tag"
},
"zing-grid-caption": {
"prefix": "<zing-grid ",
"body": [
"<zing-grid \n\t caption=\"$1\"></zing-grid>"
],
"description": "Displays a grid with the caption attribute on the grid"
},
"caption": {
"prefix": "caption",
"body": [
"caption=\"Hello World\""
],
"description": "Displays a grid with the caption attribute on the grid"
}
}
Example Output
The following example output is from our own custom code editor implementation. We would ideally like this support for visual studio code as it is a much more powerful and complete IDE.
Cloud App Screen Recording
Another link since it is giving me trouble posting links https://duaw26jehqd4r.cloudfront.net/items/0E431n0Q1m261T3S1T03/Screen%20Recording%202019-02-07%20at%2003.35%20PM.mov?X-CloudApp-Visitor-Id=2965229
Updated
There have been new features in January 2019 documenting extended the HTML extension for users specifically for web components.
https://github.com/w3c/webcomponents/issues/776
That should lead you to their latest release in January 2019 here: https://code.visualstudio.com/updates/v1_31#_html-and-css-custom-data-support
Previous Answer
Answered by #heretic-monkey. I looked up implementing VSCode extensions and not snippets. Seems the solution is there. Clearly defined in their beginning text about the capabilities. Thanks for your time.
Has anybody got the Yammer embed API for Follow and Like to work in a SharePoint site? I can get the buttons to appear and when I click on them they change to Liked and Followed but nothing is posted to Yammer and nothing appears in the activity feed. Several folks have tried this and given up and doing something via the Java SDK instead but this is long-winded with the embed API should work. Any ideas?
Code is as follows:
<script type="text/javascript" src="https://assets.yammer.com/assets/platform_embed.js"></script>
<div id="embedded-like" style="width:400px;"></div>
<script>
yam.connect.actionButton({
container: "#embedded-like",
network: "mynetwork.com",
action: "like"
});
</script>
<p>
<div id="embedded-follow" style="width:400px;"></div>
<script>
yam.connect.actionButton({
container: "#embedded-follow",
network: "mynetwork.com",
action: "follow"
});
</script>
don't know if you got there already - but was able to expand the object properties on the embed like to push details in the recent activity feed in yammer from a sp2010 page. Its totally hard coded for just one page - but I'm exploring the elements the like button can pick up - saw some on this page - but could be pre-API change
http://sp2013.blogspot.co.nz/2013/10/sharepoint-and-yammer-yammer-feed-like.html
my code:
<div id="embedded-like"></div>
<script src="https://assets.yammer.com/assets/platform_embed.js"></script>
<script>
yam.connect.actionButton({
container: "#embedded-like",
network: "[mynetwork]",
objectProperties: {
url: "URL To my sp2010 page",
type: "page",
title: "Some Title to show in the feed"
},
action: "like"
});
</script>
I would like to be able to redirect a page to a subdomain using a chrome extension. After numerous attempts, nothing works.
Ideally, I want:
"https://www.facebook.com" -> "https://www.facebook.com/groups/123456789"
and "https://www.facebook.com/*" to be left alone (where * is a wild card).
To me it should be simple as there are no variables, but it doesn't appear to be. A further complication is that I started learning java yesterday, I am okay at html, c++, c, vb etc.
Why? Because I use facebook to keep up to date with solutions to problem sheets and things on my course, but my news feed is a) Distracting and b) rubbish.
If you can help you'd be a star (if you could comment your code that'd be awsome as I can learn a bit then as well) :D
So far I have, but it doesn't work :(
manifest.json
{
"name": "Tabber",
"manifest_version" : 2,
"version": "1.0",
"description": "MyExtension",
"chrome_url_overrides": {
"*www.facebook.com*": "my.html"
},
"permissions": [
"tabs"
]
}
my.html
<!DOCTYPE html>
<html>
<head>
<head>
<meta http-equiv="refresh"content="0;URL=http://www.google.com">
</head>
</head>
<body>
</body>
</html>
First, your mistakes.
chrome_url_overrides can only override bookmarks, history or newtab pages.
https://www.facebook.com/groups/123456789 is not a "subdomain"
It's JavaScript, not Java
Second, how to do it.
It's relatively easy to do with a content script. You don't need a tabs permission even, just the host permission for Facebook.
Manifest:
{
"name": "Tabber",
"manifest_version" : 2,
"version": "1.0",
"description": "MyExtension",
"content_scripts": [
{
matches: ["*://www.facebook.com/*"],
js: ["myscript.js"],
runAt: "document_start"
}
]
}
Then, your script will be injected when any tab navigates to any facebook page.
The script itself should check the URL and navigate away if needed:
// myscript.js
if(window.location.pathname == "/") {
window.location.replace("https://www.facebook.com/groups/123456789");
}
I don't use FB myself, so not sure if it will break any logic; but it's what you were trying to do.
I am using bootstrap for a chrome extension I am writing. When imported as content script the css seem to clash with alot of the sites I am viewing (even in google search result page).
Wondering if there is anything i can do to scope this to just the dom elements I inject using content script?
The solution is to use <style scoped>.
Essentially it allows you to apply a style to a DOM node and its children, but not its parent nodes. There's a nice article on CSS-Tricks explaining how to use it.
The problem is that it's not very well supported, even in Chrome, so you'll have to use a jQuery polyfill. This is basically a jQuery plugin that simulates the functionality you'd expect from <style scoped>.
Here's a working JSFiddle doing exactly that using Bootstrap.
Here's an example of how you could implement it in your extension:
content_script.js:
$.scoped(); // Initialize the plugin
...
bootstrapped = document.createElement("div");
bootstrapped.innerHTML = "<style scoped>";
bootstrapped.innerHTML += "#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');";
bootstrapped.innerHTML += "</style>";
document.body.appendChild(bootstrapped);
...
document.body.appendChild(myDOM); // Will not possess Bootstrap styles
bootstrapped.appendChild(myDOM); // Will possess Bootstrap styles
For now, make sure to include jQuery in your page, as well as the Scoped Plugin:
"content_scripts": [ {
"js": [ "jquery.min.js", "jquery.scoped.min.js", "content_script.js" ],
"matches": [ "http://*" ]
}]