New Relic Data gives Wrong page views URL after New Relic script added via DTM - aem

We have added a new relic script via DTM,
and New Relic Data shows wrong Page URL, it shows Page views as DTM URL, not actual page views,
this happening because DTM will compile all scripts and executes the script with in a iFrame. so New Relic is considering iframe url as request URL.
any one have idea how to fix this using DTM ?
Thanks

From the documentation, there are 4 types of Javascript / 3rd Party Tag containers.
It sounds like you chose Non-Sequential HTML container type, which appends a DTM hosted iframe to the page, with your code in it. To append your code to the parent page, you must change the tag type to either Sequential HTML, or convert the tag to pure javascript and use Sequential Javascript or Non-Sequential Javascript type.
Side note: make sure to read the document page I provided above to ensure the type you choose is compatible with when you have it set to output (top of page, bottom of page, dom ready, window load)

Related

How to manipulate the meta area of the HTML dom with Scala-JS for a single page application

General Scala-JS page building advice needed. Most of the examples seem to be of the pattern where the main into which your single page application will go is between the tags in a landing page html file. How do you handle the need to insert something in the meta area of the dom? Do I need to render my landing page dynamically from the server to accomplish this? My specific need is to inject a script tag into the meta area of an already defined static html page. I'm using scalajs-react.
Generally you will want a server-rendered "root page" for the SPA. This allows you to dynamically compute proper cache busting file names for your script and stylesheet tags and to easily manage the cache expiration of the root page. Also, for proper html5 push state support you'll want to serve that page at every URL, which is easily done with a server side route.

How to integrate DTM (Dynamic Tag Management) with AEM 6?

I am a newbie to Adobe DTM (Dynamic Tag Management) and have not done any kind of training related to it. However, I have been given a requirement to integrate DTM with AEM 6. I Have some requirements related to Omniture where certain events on the website are tracked and that information needs to be sent to DTM. I have followed steps described on this blog (http://blogs.adobe.com/aemtutorials/2013/07/24/customize-the-client-context/) to customize the client context by creating a new session store and storing some sample data inside it. Now, next part is to retrieve this data into DTM which I am completely unaware on how to do. What is need to achieve in particular is to create a new data element as shown in the screenshot below and write some custom java script to access the data stored inside the client context (which is present in the session store) as explained in the blog mentioned.
I have no idea on how to integrate DTM with AEM instance and how to get hold of that data needed using the script. There is no info available on the internet regarding this, hence request you to help me in case anybody have worked on such a requirement earlier. Any help is highly appreciated
Step 1 - Set up DTM cloud services configuration in AEM. You may find cloud services config at /etc/cloudservices/dynamictagmanagement.html
Step 2 - Apply the above cloud config to the root of your website using the page property. This will insert the required JS scripts and JS object into the DOM. You could also do step (1) & (2) together by manually inserting header and footer code (from DTM) into the template.
Step 3 - Supply data to DTM JS object. This you could populate the data from server side or at client side using JS. You could leverage client context as well. JS APIs available to query client context.
PS: Am also a learner on this.
Helpful links:
http://blogs.adobe.com/experiencedelivers/experience-management/integrating-dtm-custom-aem6-page-template/
http://docs.adobe.com/docs/en/aem/6-0/administer/integration/marketing-cloud/dtm.html
You can use data elements with custom script like this:
e.g. dataElement authorizableId is custom script with content
return CQ_Analytics.ClientContext.get("/profile/authorizableId");
or
dataElement pageTitle
return CQ_Analytics.PageDataMgr.getProperty("title”);
This is how I implemented it. Please note that this implementation is for integrating with flat HTML files. Where we need to add the scripts in Head tag.
Pre-requisites:
1. We need to have login credentials for DTM website.
We need to have admin rights.
We need sc3.omniture site credentials. This is usually provided by Adobe team.
From Omniture console we need to generate the AppMeasurement.js file.
From AppMeasurement.js file we need to get important details like:
a. Tracking Server Name
b. s_account name
c. Visitor namespace
Connecting HTML files to DTM:
Login to https://dtm.adobe.com with admin credentials.
Click on Project dashboard
Click on Embed tab on top navigation.
Enable Host on Akamai.
Expand Header Code widget and copy the code.
Paste that code in the tag of your HTML.
Go back to DTM again. Expand Footer Code widget and copy the code.
Paste that code to the tag of your HTML.
Configuring DTM for Direct Call Rules:
1. Go to Rules tab from top navigation.
2. Click on Direct Call Rules from left navigation now.
Click on create rule.
Give it a name in the Name section.
Expand Conditions widget.
Pay close attention to the Conditions textbox. Direct Call Rules are fired using the _satelitte.track() method, and the text you enter in the Conditions textbox will be the argument you pass in this method. We entered “change-offer-submit”, so to fire this Direct Call Rule, we will use _satelitte.track(“change-offer-submit”) as you will see in the code below.
Now use the Adobe Analytics section to set up a custom link.
Below is the code that sets up our form and its validation. Notice the way the DTM _satelitte.track() is used. Each of the arguments passed in the _satelitte.track() method matches the Condition textbox in separate DTM rules.
HTML
<div class="outer-btn">
<input class="input-btn analyticsEvent" type="button" value="Submit" data-eventName="change-offer-submit">
</div>
JavaScript
<script>
jQuery('.analyticsEvent').on('click',function() {
window.console.log('Logged Event: ' + jQuery(this).attr('data-eventName'));
_satellite.track(jQuery(this).attr('data-eventName'));
location.href='./landingPage.html';
});
</script>
This has been superseded by a tool added to DTM in the June 2016 release, ContextHub was added in 6.1 as beta, in 6.2 it reached feature parity with ClientContext. It saves a lot of time building data layers as a lot of it will be there already .

Is it possible to add adverts to a custom Facebook Page Tab app?

I need to create a custom Facebook Page Tab app which will show an external site in an iframe. This need to have adverts on it but I'm not sure if this is possible as the site is hosted externally.
I'm not sure if I need to sign up to the Facebook Audience Network to get approved etc. either?
Any help or advice would be great.
Many browsers have this limitation of not allowing external sites to be shown in an iframe. Imagine the case when you are working hard to create a site and others show all your content in iframes. That is, naturally frustrating.
However, there is a candidate-solution: Let's suppose you create a page which sends a request to the other site and appends all the content into the body and head of your page. This is very much possible, so the solution is to:
Create a page in your site, let's call it outsider
In the server-side code of your outsider page send a request to the desired page to be shown
You will get the html of the page. Process it and include its content into the head and body of outsider. This includes:
3.1. Checking all the CSS to be reached, as the target page might refer to local CSS, which is unreachable locally at your end. Process the URLs of CSS files
3.2. Checking all the Javascript to be reached, as the target page might refer to local JS, which is unreachable locally at your end. Process the URLs of JS files
3.3. Apply the idea described in 3.1. and 3.2. for other resources, like images, until you are satisfied with the content of outsider
Create an iframe, having the source to point to outsider. outsider is inside your scope, so it should be shown
NOTE: If the site owning the target page does not like the possibility of you showing their content inside iframes, they might protect it by, let's say, having Javascript in their code, which checks whether the page is inside an iframe. Remove that code while processing the response to your request. If nothing else prevents you from showing the page in an iframe, then you should achieve success.

gwt multi-page application

I have a multipage application which needs to manually switched from one page to another. could it be done in GWT since it is targeted towards single page application. I am learning from the Google code and online forums but could not find any application which had multi-pages not linked by a common entry-point. Any ideas?
GWT has support for "pages" within application via URL fragment identifier (FI), i.e. http://www.yourhost.vom/main#pagename, where "pagename" is a fragment identifier representing a "page" within your app.
This "pages" (note that browser never really reloads the page, so GWT app stays the same), have full history support and are bookmarkable.
NOTE: throughout GWT docs fragment identifier is sometimes referred to as place token or history token.
Enable history support by adding an iframe to your host page:
<iframe src="javascript:''"
id="__gwt_historyFrame"
style="width:0;height:0;border:0">
</iframe>
Register a ValueChangeHandler to be notified when FI (page) changes: History.addValueChangeHandler(..). Within this handler you put a logic that displays the new page.
Go to a particular page by calling History.newItem("newpage") (without #)
You can even pass "parameters" to page, by dividing fragment identifier into sub parts: for example "#edit/user4". Just parse this FI, invoke code that shows edit page and pass "user4" to it. You can use any character to divide FI into a "page" part and "parameter" part (I use "/" here). To see this in real life: open a message in gmail and look at URL.
While you can use GWT to switch pages, the resulting code will be slow and suboptimal, with the pages taking longer to load.

Grab contents of a webpage in GWT

Let's say that I have a link to a webpage that contains some text. What's the easiest way to grab this text to process?
Thanks.
Long story short, I don't think it's possible to make a request from the client js to grab the text from a url with a different domain.
It is possible to make requests to load json. This link describes how.
Basically, the steps are:
Embed a tag in the GWT page
after GWT page is initialized, update
the script tag's src to load remote
url
remote url returns some json data
padded inside a callback javascript
function such as:
callback({blah:foo})
So, you're only option may be writing a method on the server side that loads the url, gets the text. You could then call this method from gwt client using normal rpc technique.
Assuming same origin: use the "RequestBuilder" class.
If you are trying to grab a webpage from a different origin, then it obviously won't work.