Rich Snippets Nesting Issue - asp-classic

I've never used Rich Snippets before, so this is a little bit of a learning curve for me. I believe my issue is a nesting problem but I can't find any documentation anywhere that explicitly states how to nest these properties correctly.
I'm wanting to index a single-product review with multiple reviews into Rich Snippets with classic ASP pulling in different data feilds, here is my code:
<div>
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed">Forma Stanzol</span><br />
By <span itemprop="reviewer"><%=formaStanzolReviewArray(0,i)%></span><br />
<time itemprop="dtreviewed" datetime="<%=FormatDateTime(formaStanzolReviewArray(1,i),2)%>"><%=FormatDateTime(formaStanzolReviewArray(1,i),2)%></time> <br />
<span itemprop="description"><%=formaStanzolComment%></span>
</div>
</div>
This returns the Error: No rich snippet will be generated for this data, because it appears to include multiple reviews of an item, but no aggregate review information.
So, I added a dummy Aggregate code with static values, here's what it looks like all together:
<div>
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed">Forma Stanzol</span><br />
By <span itemprop="reviewer"><%=formaStanzolReviewArray(0,i)%></span><br />
<time itemprop="dtreviewed" datetime="<%=FormatDateTime(formaStanzolReviewArray(1,i),2)%>"><%=FormatDateTime(formaStanzolReviewArray(1,i),2)%></time> <br />
<span itemprop="description"><%=formaStanzolComment%></span>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<span itemprop="itemreviewed">Forma Stanzol</span>
<span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<span itemprop="average">9</span>
out of <span itemprop="best">10</span>
</span>
based on<span itemprop="count">5</span> user reviews.
</div>
</div>
This causes my "Reviews" to not error but then all of my "Aggregate Reviews" push out this Error: No rich snippet will be generated for this data, because it appears to include multiple aggregate reviews of many items, instead of a single aggregate review of one item.
Seems like it's working against itself no matter what I do, so that's why I believe this to be a nesting issue.
How can I fix this?
EDIT: Ideally, I don't event want the Aggregate view of this item. The reviewer, item name, review date, and review description is all I need.
EDIT EDIT: This code is also running in a For loop where its getting information from the database with each pass.

Ok so the issue here was that a website, with a single product, but multiple reviews needs only one "Review-Aggregate" and one "Rating" itemtype. However, multiple "Review" itemtypes must be used.
So, my For Loop creates a "Review" for each row in the database, using the related data feilds and then after the conditional statement, the "Review-Aggregate" and Rating" codes are placed.
Code:
For i = 0 to uBound(formaStanzolReviewArray,2)
reviewCount = reviewCount + 1
formaStanzolComment = trim(formaStanzolReviewArray(2,i))
'Do not show reviews with empty comments
If Not (formaStanzolComment = "") OR isNull(formaStanzolComment) Then
%>
<div>
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span style="position: absolute; left: 9999px;" itemprop="itemreviewed">Forma Stanzol</span>
Rating: <span itemprop="rating"><%=formaStanzolReviewArray(3,i)%></span> -
By <span itemprop="reviewer"><%=formaStanzolReviewArray(0,i)%></span> -
<time itemprop="dtreviewed" datetime="<%=FormatDateTime(formaStanzolReviewArray(1,i),2)%>"><%=FormatDateTime(formaStanzolReviewArray(1,i),2)%></time> <br />
<span itemprop="description"><%=formaStanzolComment%></span>
</div>
</div>
<%
sumRating = sumRating + formaStanzolReviewArray(3,i)
End If
Next
ratingAvg = sumRating / reviewCount
%>
<div style="position: absolute; left: 9999px;">
<div itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<span itemprop="worst">1</span>
<span itemprop="average"><%=ratingAvg%></span>
out of <span itemprop="best">5</span>
</span>
based on <span itemprop="votes"><%=reviewCount%></span> ratings.
<span itemprop="count"><%=reviewCount%></span> user reviews.
</div>
</div>
<%
Think of it as multiple User reviews in the For Loop, but we collect all of those reviews once in the aggregate, and then give that aggregate a rating scale.
Hope this helps anyone having nesting issues.
Please Note: I am using classic ASP for this particular code.

Related

Custom Data Attributes HTML Nesting issues + Data Collection using GTM and GA4

I'm developing custom event tracking on my website using Custom Data Attributes (data-*) in the HTML code. The data collected should be sent to Google Analytics using Google Tag Manager (that enables the data collection using variables, triggers, and tags).
However, I'm facing several issues.
I have different sub-level data attribute categories. For example:
data-analytics-region (nesting the data attributes below)
data-analytics-section-engagement (nesting the data attributes below)
data-analytics-title (etc.)
Here is an example:
<section class="homepage-section collection-module" data-module-template="tiles" data-analytics-region="tiles">
<div data-unit-id="maintenance" data-analytics-section-engagement="maintenance">
<div class="unit-wrapper">
<a class="unit-link" href="/fr/services/maintenance/" target="_self" rel="follow" data-analytics-region="learn more"></a>
<div class="unit-copy-wrapper">
<h4 class="headline">Entretien</h4>
<h5 class="subhead" role="presentation">Moteur de performances<br class="large-hide medium-hide small-show" /> qui tiennent la route.</h5>
<div class="cta-links">
<a class="icon icon-after icon-chevronright" href="/fr/services/maintenance/" target="_self" rel="follow" data-analytics-title="Learn more - Maintenance" aria-label="En savoir plus sur l'entretien">En savoir plus</a>
<a class="icon icon-after icon-chevronright nowrap" href="/fr/contact/" target="_self" rel="follow" data-analytics-title="Free estimate - Maintenance" aria-label="Obtenez gratuitement un devis">Devis gratuit</a>
</div>
</div>
<div class="unit-image-wrapper">
<figure class="unit-image unit-image-maintenance-tile" data-progressive-image></figure>
</div>
</div>
</div>
<div data-unit-id="financing" data-analytics-section-engagement="financing">
<div class="unit-wrapper">
<a class="unit-link" href="/fr/services/financing/" target="_self" rel="follow" data-analytics-region="learn more"></a>
<div class="unit-copy-wrapper">
<h4 class="headline">Financement</h4>
<h5 class="subhead" role="presentation">Pour toutes les marques.<br class="large-hide medium-hide small-show" /> Et toutes les bourses.</h5>
<div class="cta-links">
<a class="icon icon-after icon-chevronright" href="/fr/services/financing/" target="_self" rel="follow" data-analytics-title="Learn more - Financing">En savoir plus</a>
</div>
</div>
<div class="unit-image-wrapper">
<figure class="unit-image unit-image-financing-tile" data-progressive-image></figure>
</div>
</div>
</div>
</section>
I was always able to retrieve the correct data-analytics-title value (which is the lowest data attribute category level in the above code). However, for the other data attributes, it failed.
Here is how I set up the data attributes data collection in Google Tag Manager:
For example, if I clicked on
<a class="icon icon-after icon-chevronright" href="/fr/services/maintenance/" target="_self" rel="follow" data-analytics-title="Learn more - Maintenance" aria-label="En savoir plus sur l'entretien">En savoir plus</a>
Here is what I get using the Google Tag Assistant (preview mode):
As you can see, only the data-analytics-title has a value.
I want the data-analytics-region and data-analytics-section-engagement to have a value as well (here it says undefined), so that I'm able to know where exactly the user clicked on the page. What am I doing wrong?
Finally, and it is linked to my 1st question, I want to be able to link the different data attributes so that I know from which page/section/link/etc. the user triggered an event. I'd like to have a clear view of that in my GA4 Reports. How can I do so?
Thanks for your help :-)
First thing we need to know is that user is clicking which element. And the Data you need is which element.
Let's take a simple version of the html code.
<x data-analytics-region="xxx">
<y data-analytics-section-engagement="yyy">
<z data-analytics-title="zzz">
</z>
</y>
</x>
Now the user is clicking the z element. So the GTM trigger fired and get the data-analytics-title
But we don't get the value from data-analytics-section-engagement and data-analytics-region. Why? Because they are different element
So we need to find those element first. Based on the click element.
From the example :
We need to find the y element and x element based on z element.
There are few ways we can do it.
I would try on the Element.closest()
Not test yet but similar to
var clickElement = {{Click Element}};
var findXElement = clickElement.closest('x');
var dataAnalyticsRegionValue = findXElement.getAttribute("data-analytics-region");
var findYElement = clickElement.closest('y');
var dataAnalyticsSectionEngagementValue = findYElement.getAttribute("data-analytics-section-engagement");
You might need to adjust the code based on your real html but the direction is the same.

How to bind razor variable to vue attribute?

I am trying bind a razor variable to html attribute with vuejs.
The variable which i must use is "#culture". It is a string variable which gives me current culture information.
My code is:
<div class="dropdown-product-item" v-for="(item, index) in card.items">
<span class="dropdown-product-remove"><i class="icon-cross" v-bind:data-id="item.Id" v-on:click="removeFromCard"></i></span>
<a class="dropdown-product-thumb" v-bind:href="/#{Html.Raw(culture);}/item.Link">
<img v-bind:src="item.ResimUrl" v-bind:alt="item.Ad">
</a>
<div class="dropdown-product-info">
<a class="dropdown-product-title" v-bind:href="/#{Html.Raw(culture);}/item.Link">{{item.Ad}}</a>
<span class="dropdown-product-details" v-if="!item.IndirimliFiyat">{{pieces[index]}} x {{item.Fiyat.PriceString}}</span>
<span class="dropdown-product-details" v-else>{{pieces[index]}} x {{item.IndirimliFiyat.PriceString}}</span>
</div>
This code doesn't work. I only see white screen.
How to I do this? Could you help me?

How to add a new CSS class to a Link Badge if the value is 0?

I'm using the small module Link Badges to display a badge with the amount of flagged nodes next to a link to the View in question. It works great and I've styled the badge to my needs. This is the current HTML code:
<a class="menu__link menu__link link-badge-wrapper">
<span class="link-badge-text">My View</span>
<span class="link-badge-badge-wrapper">
<span class="link-badge link-badge-menu_badges_execute_view">0</span>
</span>
</a>
Now, I'd like to display the badge a little bit differently (other colors etc.) when the value is 0. I thought about doing this by adding a new CSS class link-badge-zero to the value.
<a class="menu__link menu__link link-badge-wrapper">
<span class="link-badge-text">My View</span>
<span class="link-badge-badge-wrapper">
<span class="link-badge link-badge-zero link-badge-menu_badges_execute_view">0</span>
</span>
</a>
How can I achieve this?
If you just want to add a class if the value inside your span is "0", give this a try
JQuery:
if($(".link-badge").text() == "0"){
$(".link-badge").addClass("link-badge-zero");
}
Here is a fiddle

Need xpath to locate 2 buttons with almost same properties for using in Selenium automation script

Both these buttons have almost similar ID (the number on the ID may change and so is not reliable)
Both have same classes
They both reside under the same parent
Except for the span nothing is different
All the UI elements of the application I am trying to locate and build events on Using Selenium are similar to the below piece...
Can anyone please suggest how I can locate these buttons preferable with xpath?
<div id="button-1749" class="x-btn x-box-item x-toolbar-item x-btn-default-toolbar- small x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon x-item-disabled x-disabled x-btn-disabled x-btn-default-toolbar-small-disabled" style="margin: 0pt; left: 1563px; top: 0px;">
<em id="button-1749-btnWrap" class="">
<button id="button-1749-btnEl" class="x-btn-center" autocomplete="off" role="button" hidefocus="true" type="button" aria-disabled="true" disabled="">
<span id="button-1749-btnInnerEl" class="x-btn-inner" style="">Delete Selected</span>
<span id="button-1749-btnIconEl" class="x-btn-icon x-hide-display"> </span>
</button>
</em>
</div>
<div id="button-1750" class="x-btn x-box-item x-toolbar-item x-btn-default-toolbar-small x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon" style="margin: 0pt; left: 1654px; top: 0px;">
<em id="button-1750-btnWrap" class="">
<button id="button-1750-btnEl" class="x-btn-center" autocomplete="off" role="button" tabindex="1" hidefocus="true" type="button">
<span id="button-1750-btnInnerEl" class="x-btn-inner" style="">New Title</span>
<span id="button-1750-btnIconEl" class="x-btn-icon x-hide-display"> </span>
</button>
</em>
</div>
If you want to look for the elements under a specific div, you can use descendent axis.
Example:
//div[#id='your div']/descendant::button[contains(#class, 'x-btn-center')]/span[text()='Delete Selected']"
This will give you Deleted Selected button that is within the div with id 'your div'.
You could also use GetElements (opposed to GetElement) and this will return a List of elements that match your search criteria. Then, providing the order the buttons appear on the page never changes, you may use this List to access the button you want every time by using the associated index.
Eg.
ReadOnlyCollection<IWebElement> buttons = driver.FindElements(By.XPath("YOUR XPATH HERE"));
//If it's the 3rd button that matches your criteria
buttons[2].Click(); //or whatever you want with this button :)
I think this should work in your case:
locator = driver.find_element_by_xpath("//div/em/button/span[contains(text(),'Delete Selected')]")
You can do similar way in case of another element.
though xpath is a desired locator per your question, there are documented speed differences between xpath and css selector, here's one example: http://saucelabs.com/blog/index.php/2011/05/why-css-locators-are-the-way-to-go-vs-xpath/. to locate those elements via css selector, use the following, python example
els = driver.find_elements_by_css_selector("button[id^=button]
for eachel in els:
eachel.click()
You have to create your own xpath if the xpath of 2 elements are same
driver.findElement(By.xpath("//span[contains(text),'New Title')]")).click;

Stars and aggregated rating are not shown when using schema.org markup and and Review in xhtml page

I'm trying to implement schema.org's microData format in my xhtml template.
Since I'm using xhtml templates, I needed to add
<div itemprop="reviews" itemscope="itemscope" itemtype="http://schema.org/Review">
instead of:
<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
otherwise my template wouldn't be parsed. I found the solution here
My markup looks like this:
<div itemscope="itemscope" itemtype="http://schema.org/Place">
<div itemprop="aggregateRating" itemscope="itemscope"
itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">#{company.meanRating}</span> stars -
based on <span itemprop="reviewCount">#{company.confirmedReviewCount}</span> reviews
</div>
<ui:repeat var="review" value="#{company.reverseConfirmedReviews}">
<div itemprop="reviews" itemscope="itemscope" itemtype="http://schema.org/Review">
<span itemprop="name">Not a happy camper</span> -
by <span itemprop="author">#{review.reviewer.firstName}</span>,
<div itemprop="reviewRating" itemscope="itemscope" itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">1</span>/
<span itemprop="bestRating">5</span>stars
</div>
<span itemprop="description">#{review.text} </span>
</div>
</ui:repeat>
</div>
When testing this in http://www.google.com/webmasters/tools/richsnippets I'm not getting any stars back or aggregated review count
What am I doing wrong here?
Yes!!
The problem actually consisted of two errors, first somebody had named the div class to
"hReview-aggregate" which is appropriate when you implement Microformats not
Microdata
The second error was that I misunderstood the specification of schema.org.
This is how I end up doing:
<div class="box bigBox" itemscope="itemscope" itemtype="http://schema.org/LocalBusiness">
<span itemprop="name">#{viewCompany.name}</span>
<div class="subLeftColumn" style="margin-top:10px;" itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
<div class="num">
<span class="rating" id="companyRating" itemprop="ratingValue">#{rating}</span>
</div>
<div>Grade</div>
<div class="num">
<span class="count" id="companyCount" itemprop="reviewCount">
#{confirmedReviewCount}
</span>
</div>
</div>
</div>
Hope this helps!!!!!
hey checkout how holidayhq guys have done it for this url : www.holidayiq.com/destinations/Lonavala-Overview.html
you can check there snippet on this tool : http://www.google.com/webmasters/tools/richsnippets
and google out this keyword "lonavala attractions" and you will see the same snippet, they have used microdata to generate this reviews in snippet, they have used typeof="v:Review-aggregate" and much more tags, have a look at it, its nice implementation of the reviews in snippet kind of work.

Resources