does shadowdom change the rules for ids - dart

The answer to question Cascading style sheets use "id" or "class" says for id's
Put an ID on an element if "it is the ..." (e.g. navigation)
and a further comment:
Because of this ids can only be used once (in the page) but elements can be classified multiple times. Also an element can only have one identifier but multiple classifications. However elements can be identified and classified.
With shadow dom, does the part about ids can be used once (in the page) still hold? For example, a simple way to grab elements in the component is to give each id's unique to the component and query them:
In html:
<input id="amount" placeholder="Amount" on-change="{{recalc}}"></input>
<input id="term-years" placeholder="Term (yrs) e.g. 30" on-change="{{recalc}}"></input>
<input id="rate" placeholder="Interest Rate" on-change="{{recalc}}"></input>
In Dart code:
termYearsElm = shadowRoot.querySelector('#term-years');
amountElm = shadowRoot.querySelector('#amount');
rateElm = shadowRoot.querySelector('#rate');
In playing with this, multiple instances of the component do not conflict. Is this approach safe or a bad idea? If it is safe then have the rules for ids have changed?

Yes it is perfectly legitimate to use an ID on an element of a component as long as it is 1) Unique to that component, and 2) The component has a shadowDOM. The shadowDOM encapsulates your components from each other. Thus you can have a component with id rate and it is used only once within that component. Even if you use that component multiple times within the same page the id's are encapsulated from each other.
Just a quick FYI as well, you can also use the $[] accessor for a shortened form. Dart code:
termYearsElm = $['term-years'];
amountElm = $['amount'];
rateElm = $['rate'];

Related

How do you get the value of a data attribute within an event-based rule in Adobe Dynamic Tag Manager (DTM)?

I have an event-based rule configured to fire on click of an element with a specific class. On click, I would like to capture the value of a data attribute that exists. The DTM documentation says you can capture attribute values using this syntax:
%this.data-event%
or
%this.id%
Example HTML:
On click of links with the class "test", I would like to store the value of "event name" within an eVar. When I used the above syntax however, the syntax is converted to a string and in the Adobe server call as:
v25:%this.data-event%
What is the best way to dynamically grab the value of an attribute of an HTML element on click within DTM?
DTM documentation says you can do that, but in practice I too have found that it doesn't seem to work as advertised most of the time, and will instead populate it with a literal (un-eval'd) string like that.
So what I do instead is under Conditions > Rule Conditions I create a Custom condition. In the Custom condition, I add the following:
// example to get id
_satellite.setVar('this_id',this.id);
// example to get href
_satellite.setVar('this_href',this.href);
return true;
Basically I create on-the-fly data elements using javascript, and then return true (so the condition doesn't affect the rule from triggering).
Then I use %this_id%, %this_href%, etc. syntax from the data element I created, in the Adobe Analytics section variable fields.
The easist way to capture the values of a data attribute against an eVar or prop on the element clicked using DTM is to set the input as the following:
%this.getAttribute(data-attributename)%
For example, if there was a data attribute on an element of data-social-share-destination='facebook' simply input %this.getAttribute(data-social-share-destination)%. This will then capture the value of 'facebook'
More detail on data attributes can be found at http://www.digitalbalance.com.au/our-blog/event-based-tracking-using-html5-custom-data-attributes/
I found a solution. The best way to grab the value of an attribute on click is to use this syntax:
%this.getAttribute(data-title)%
The key is to not use quotes around the attribute name AND ensure the attribute has a value.
If the attribute is missing, the expression is not replaced by an empty string as one would normally expect from experience in other platforms, but instead will display the raw un-interpolated code.

Find pages with tag

In a Umbraco 7 solution, i have a Tags Content picker on all pages. Pages can with this, set tags on each page.
I then want to get alle pages, within the intire site, that has, lets say tag 111 (id, not name).
I have tried with:
var ids = Model.MacroParameters["tags"]; //the tags to show
CurrentPage.AncestorOrSelf(1).Descendants().Where(x => ids.Contains(x.tags.ToString()));
But that gives me the error:
Cannot use a lambda expression as an argument to a dynamically dispatched operation without first casting it to a delegate or expression tree type
Whats the correct way?
Solved it with;
Umbraco.Content(rootId).Descendants().Where("tags.Contains(#0)", ids);
You have a few options, depending on whether you prefer a dynamic or strongly typed view model.
Strongly Typed API
Umbraco.TypedContentAtRoot().Descendants().Where(x => x.tags.Contains(ids));
Dynamic API
Umbraco.ContentAtRoot().Descendants().Where("tags.Contains(#0)", ids);
Please note that the Contains statement may give you inconsistent results, as the tags property seems to be returning a comma separated list. In that case you can try splitting the string or install the Core Property Value Converters package and get the tags as IEnumerable<IPublishedContent>
Always try to avoid using Descendants, especially on the root node.
To get the tags for a property:
ApplicationContext.Current.Services.TagService.GetTagsForProperty(Model.Content.Id, "propertyname")
To find content with a specific tag:
ApplicationContext.Current.Services.TagService.GetTaggedContentByTag("tag")

Dynamic Tag Management - Storing

We're in the process of moving to DTM implementation. We have several variables that are being defined on page. I understand I can make these variables available in DTM through data elements. Can I simply set up a data elem
So set data elements
%prop1% = s.prop1
%prop2% = s.prop2
etc
And then under global rules set
s.prop1 = %s.prop1%
s.prop2 = %s.prop2%
etc
for every single evar, sprop, event, product so they populate whenever they are set on a particular page. Good idea or terrible idea? It seems like a pretty bulky approach which raises some alarm bells. Another option would be to write something that pushes everything to the datalayer, but that seems like essentially the same approach with a redundant step when they can be grabbed directly.
Basically I want DTM to access any and all variables that are currently being set with on-page code, and my understanding is that in order to do that they must be stored in a data element first. Does anyone have any insight into this?
I use this spec for setting up data layers: Data Layer Standard
We create data elements for each key that we use from the standard data layer. For example, page name is stored here
digitalData.page.pageInfo.pageName
We create a data element and standardize the names to this format "page.pageInfo.pageName"
Within each variable field, you access it with the %page.pageInfo.pageName% notation. Also, within javascript of rule tags, you can use this:
_satellite.getVar('page.pageInfo.pageName')
It's a bit unwieldy at times but it allows you to separate the development of the data layer and tag manager tags completely.
One thing to note, make sure your data layer is complete and loaded before you call the satellite library.
If you are moving from a legacy s_code implementation to DTM, it is a good best practice to remove all existing "on page" code (including the reference to the s_code file) and create a "data layer" that contains the data from the eVars and props on the page. Then DTM can reference the object on the page and you can create data elements that map to variables.
Here's an example of a data layer:
<script type="text/javascript">
DDO = {} // Data Layer Object Created
DDO.specVersion = "1.0";
DDO.pageData = {
"pageName":"My Page Name",
"pageSiteSection":"Home",
"pageType":"Section Front",
"pageHier":"DTM Test|Home|Section Front"
},
DDO.siteData = {
"siteCountry":"us",
"siteRegion":"unknown",
"siteLanguage":"en",
"siteFormat":"Desktop"
}
</script>
The next step would be to create data elements that directly reference the values in the object. For example, if I wanted to create a data element that mapped to the page name element in my data layer I would do the following in DTM:
Create a new data element called "pageName"
Select the type as "JS Object"
In the path field I will reference the path to the page name in my data layer example above - DDO.pageData.pageName
Save the data element
Now this data element can be referenced in any variable field within any rule by simply typing a '%'. DTM will find any existing data elements and you can select them.
I also wrote about a simple script you can add to your implementation to help with your data layer validation.Validate your DTM Data Layer with this simple script
Hope this helps.

how to track the social media icons using DTM (Dynamic tag manager)

I have the below code in my web site.
I want to track each anchor tag using DTM. I know how to track single element. Since here we have a bunch of different elements, can anyone help how to track them using DTM? I don't want to create separate rule for each element. In a single rule how can we track these elements.
Here is an example of what you can do.
For Element Tag or Selector put "a.at-share-btn" (no quotes). This will target all the relevant links first. We can look for this too in the next step, but "pre-qualifying" it with this will improve performance so that the rule is not evaluated against every single a click.
Then, under Rule Conditions, add a Criteria of type Data > Custom.
In the Custom box, add the following:
var shareType = this.getAttribute('class').match(/\bat-svc-([a-z_-]+)/i);
if (shareType&&shareType[1]) {
_satellite.setVar('shareType',shareType[1]);
return true;
}
return false;
This code looks for the class (e.g. "at-svc-facebook") and puts the last part of it (e.g. "facebook") into a data element named shareType.
Then, you can reference it using %shareType% in any of the DTM fields. Note: because this data element is made on-the-fly, it will not show up in the auto-complete when you type it out in a field.
Alternatively, in custom code boxes (e.g. if you are needing to reference it in a javascript/3rd party tag box), you can use _satellite.getVar('shareType')

Big Commerce Custom Fields

I'm planning on allowing a client to provide a couple codes for each product that I'll need to reference with Javascript on the product pages.
Basically my plan was to use the Big Commerce's 'custom fields' to do so, but I'm having trouble spitting out the custom fields onto the product pages. I've been looking all over for some type of GLOBAL variable that allows me to reference custom fields, but I'm coming up dry. I would think there would be some type of GLOBAL array with all the custom fields in it, or a way to reference them by name directly.
Am I blind, or is there just no way to do this directly in the BC template file?
Thanks.
In Bigcommerce the custom fields can generally be found within the ProductOtherDetails.html Panel which contains a Snippet named ProductCustomFieldItem.html. This snippet has the markup for each custom field that the system outputs.
Inside of the ProductCustomFieldItem.html Snippet are the two codes you are looking for: %%GLOBAL_CustomFieldName%% and %%GLOBAL_CustomFieldValue%%.
I ran into this as well - given that it's quite a long time later, I'm supposing there's no better answer - a decent amount of searching turned up nothing useful as it seems all you can do is output the full set of custom fields as a set of divs.
So, I output them into a div which was hidden:
<div id="fpd-custom-fields" style="display:none;">
%%SNIPPET_ProductCustomFields%%
</div>
and then set up a javascript function to get the value based on the name:
function getCustomFieldValue(label)
{
var value = '';
$('#fpd-custom-fields div.Label').each(function()
{
if($(this).text().toLowerCase() == (label.toLowerCase() + ':'))
{
value = $('div.Value', $(this).parent()).text().trim();
}
});
return value;
}
Doesn't feel quite right as it's not a very clean solution, but was the best I could come up with unfortunately!

Resources