I have implemented tracking on my first AMP site and global tracking is working well but I haven't found a solution to track clicks on specific CSS classes.
For unique selectors like id="my_unique_name", I use the following:
"price click":
{
"on": "click",
"selector": "#my_unique_name",
"request": "event",
"vars":
{
"eventCategory": "Activity",
"eventAction": "Price button"
}
}
This works fine.
Now if I try to capture clicks on something like this: class="my_class" it doesn't work. I have tried the following possibilities:
"selector": "div.my_class"
"selector": ".my_class"
"selector": "my_class"
Is there a way to track clicks based on CSS classes?
Thanks
Laurent
Related
Thumbnails from external urls are not loading. However, the post inspector tool loads it just fine.
Page I used to perform some tests: https://www.cnbc.com/2022/10/28/more-than-40percent-of-us-households-will-owe-no-federal-income-tax-for-2022.html
Things I've tried so far:
Add an extra parameter at the end of the url in order to clear linkedin cache.
Post Inspector Tool
I did some research but I wasn't successful on finding a solution.
I created a post using different links like youtube and stackoverflow. Thumbnails didn't show up either.
I made sure each page has those required meta(open graph) tags that allows the crawler to retrieve information.
Here's an example of one of those API requests I've been calling to(I got this from the docs):
`
{
"author": "urn:li:person:{ID}",
"lifecycleState": "PUBLISHED",
"specificContent": {
"com.linkedin.ugc.ShareContent": {
"shareCommentary": {
"text": "Learning more about LinkedIn by reading the LinkedIn Blog!"
},
"shareMediaCategory": "ARTICLE",
"media": [
{
"status": "READY",
"description": {
"text": "Official LinkedIn Blog - Your source for insights and information about LinkedIn."
},
"originalUrl": "https://www.cnbc.com/2022/10/28/more-than-40percent-of-us-households-will-owe-no-federal-income-tax-for-2022.html",
"title": {
"text": "Official LinkedIn Blog"
}
}
]
}
},
"visibility": {
"com.linkedin.ugc.MemberNetworkVisibility": "PUBLIC"
}
}
`
In the Share Media object, you're missing the media attribute. It accepts LinkedIn URN so you'll need to upload the image. Personally, I'm not using that attribute but thumbnails that accepts image url. I don't see it in the docs anymore so something might have been changed. At least it's still working for me and I haven't seen it deprecated in the changelog yet. Be careful with the image requirements as well. It accepts an image url with this signature
{
...,
"thumbnails": [{
"url": "https://image-url.com"
}]
}
I have implemented AMP analytics and a couple of events, it's working fine but I'm wondering how I could capture the destination of a clicked link.
If I have a link like this:
<a rel="nofollow,noopener" data-item="ShopName" data-product="ProductName" class="link-price" target="_blank" href="ShopURL">ShopName</a>
I track it like this:
"article prices":
{
"on": "click",
"selector": ".link-price",
"request": "event",
"vars":
{
"eventCategory": "Prices",
"eventAction": "<I WOULD LIKE SHOPNAME HERE",
"eventLabel": "<I WOULD LIKE PRODUCTNAME HERE>"
}
}
I would be tempted to put some javascript in there but javascript is not allowed.
Is there any possibility to track data attributes and urls?
Use data attributes in HTML:
data-vars-my-label="ProductName1"
and your config JSON:
"vars": {
"event_label": "${myLabel}",
...
See https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md
I tried to record a flow for my website using tag assistance extension, but it seems that it doesn't work with AMP analytics.
Could anyone help me or suggest any similar tool to do this record.
i'm trying to test if google analytics filter "to block our internal traffic" work or not. cause i tested it in google analytics and it seems that the traffic goes to the real time.
I found a solution for my problem
- we just need to send something like this
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y",
"anonymizeIP": ""
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
-We should send "anonymizeIP": "" to make google pick up the user ip and then the filter will work.
I'm trying to add a button into the Gmail compose toolbar at the Insert section specifically. I've seen an extension that does just that, so I know its possible but I'm confused on how to do it.
I'm using the content_Script to javascript inject into the webpage but the compose window is in an iframe window which apparently you aren't allowed to inject into because the iframe loads after the content_script even with the "run_at": "document_end".
Also another thing I'm confused on is that Gmail has all their id tags randomizing so how could I know what tag to inject into if they are always different every time I compose an email.
So could anyone help me out with this an let me know how to go about using a content_script to inject into an iframe and how to get around GMail id tags always randomizing/being different.
{
"name": "Test Gmail",
"version": "0",
"description": "Test Gmail",
"permissions": ["tabs", "http://*/*", "https://*/*"],
"content_scripts": [
{
"matches": [ "http://*/*", "https://*/*"],
"css": ["mystyles.css"],
"js": ["myScript.js"],
"run_at": "document_end",
"all_frames": true
}
]
}
Use JQuery and listen for the even "DOMNodeInserted". After that you want to use JQuery to locate where you want to insert the button or whatever using the function $(selector, context); to search for the parent. GMail id name is all done dynamically so you have to try search for something that doesn't change such as the html tag or class name's.
I have a contentscript that essentially does a console.log to indicate that it has been injected into a page, and my manifest.json has all_frames set to true.
As a result, if I go to http://www.reddit.com/r/videos I see a message per frame and if I click on a video, I will also see a message coming from a script injected into the video's iframe. This indicates to me that if the page is dynamically modified to include an iframe, the contentscript will be injected into it.
When I go to http://www.html5video.org, I only get a message from one frame, but if I look at the DOM I see that there is an iframe for the video so I would expect my contentscript to be injected into it, but it is not.
My ultimate goal is to get a selector for the video on the page and I would expect to be able to do so by injecting code that looks for it into the iframe.
Help is appreciated.
I suspect that Chrome will inject your content scripts into an IFRAME that is part of the original page source which is the case with the reddit.com example - the IFRAMEs are part of the original page so Chrome can and will inject into those. For the html5video link the IFRAME is not part of the original source. However, if you inspect the elements you can see the IFRAME which suggests to me that the IFRAME has been dynamically loaded to the DOM. I see the same behaviour with an extension I have written so it seems consistent.
If you need to inject into the IFRAME then perhaps you can hook the DOM creation event and take the action you require:
document.addEventListener('DOMNodeInserted', onNodeInserted, false);
UPDATE:
What about this for http://html5video.org/ - using the following content_script code I can get the IFRAME and then VIDEO tag. Note: This approach/concept should also work pretty well too for Reddit.
content_script.js
console.log("content script for: " + document.title);
var timer;
document.addEventListener('DOMNodeInserted', onNodeInserted, false);
function onNodeInserted(e)
{
if(timer) clearTimeout(timer);
timer = setTimeout("doSomething()", 250);
}
function doSomething()
{
$media = $(".mwEmbedKalturaIframe");
console.log($media);
$video = $media.contents().find("video");
console.log($video);
}
manifest.json
{
// Required
"name": "Foo Extension",
"version": "0.0.1",
// Recommended
"description": "A plain text description",
"icons": { "48": "foo.png" },
//"default_locale": "en",
// Pick one (or none)
"browser_action": {
"default_icon": "Foo.png", // optional
"default_title": "Foo Extension" // optional; shown in tooltip
},
"permissions": [ "http://*/", "https://*/", "tabs" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["jquery-1.7.1.min.js", "content_script.js" ],
"run_at": "document_idle",
"all_frames": true
}
]
}
See also: jQuery/JavaScript: accessing contents of an iframe