Canonical Tags

exzyte

11-06-2018

Can we use Adobe Dynamic Tag Manager to add canonical tags to specific pages on Adobe Experience Manager (AEM)?

If yes, then can you please let me know how. If not then, is there any other way?

Regards

Accepted Solutions (1)

Accepted Solutions (1)

StewSchilling

MVP

21-06-2018

It appears that you have two page load rules (in DTM staging) that are trying to do something with the canonical tag.

MEE Canonical - Contact Us

-and-

MEE home Canonical Tag

Let's focus on the "Contact Us" rule.

-It looks like you modified the conditions, changing the match against the "Hostname" data element (This looks like a good change). 

-It also looks like you added a Path condition to the rule. I can tell this because of the addition of scope:{URI:{include:[/\contact/i]}

There are a couple tricky things about "path" conditions in DTM.

1) The evaluation is not against document.location.pathname as you might expect. It is against _satellite.URI() which includes both document.location.pathname and document.location.search.

2) If a path condition is not met, there is no indication in the console of the fact.

In your case, let's test your path condition in the console:

Navigate to Middle East Electricity | Contact

Open the Dev console.

>  _satellite.URI()     ----  returns "/en/contact.html"

>  _satellite.URI().match(/\contact/i)     -----   returns null (your path condition is not met)

> _satellite.URI().match(/\/contact/i)   ----- returns an array (THIS WORKS!)

^^^ You are missing the forward slash in your Path condition.

(Or could just remove the backslash as in _satellite.URI().match(/contact/i)  )

The ultimate way to know if your rule is working is to check for the expected outcome. 

In this case, the expected outcome is the insertion of the HTML element,

<link rel="canonical" href="https://www.middleeastelectricity.com/en/contact.html" />

To do this, you can run this in the console: document.querySelectorAll('link[rel="Canonical"]')

When everything is hunky dory, you will see a NodeList array with one item.

============================================================

I hope that this gets you going.  I have a couple other things to say.

1) I don't relly like Path conditions in DTM because they don't behave like one might expect.

2) In place of path conditions I like to create a data element for document.location.pathname and use data element comparisons in conditions.

3) The rule, "MEE home Canonical Tag", is set to run at pageBottom. This rule also has problems with conditions, but if you get past those problems, you will find that the tag is not inserted in the HEAD of the document.  This rule should fire at page top.

Answers (17)

Answers (17)

exzyte

01-08-2018

A very good day to you!

I think I got the canonical tag working on this page "https://www.middleeastelectricity.com/en/contact.html" 😃

I ran this in the console: document.querySelectorAll('link[rel="Canonical"]')

and this is what it showed:

devtool.jpg

StewSchilling

MVP

20-06-2018

Yes. You can inject your canonical tag to any page using a DTM pageTop rule and sequential HTML.  You are doing that part right.  I took a peek at your DTM library on the page and found this as the internal representation of your DTM Rule:

I think that your issue is in the condition of the rule.  You are comparing document.location.hostname to a full URL.

I'd suggest that you modify your condition to compare document.location.pathname against /\/en\/contact.html/i

Once you do that. I think you'll see the results you expect.

Sometimes it just takes another set of eyes!

exzyte

21-06-2018

My apologies, it is this info that was showing before on Chrome DevTools Console before I updated the condition:

SATELLITE: Condition function(){return _satellite.textMatch(_satellite.getVar("Hostname"),/\www.middleeastelectricity.com\/en\/contact.html/i)} for rule "MEE Canonical - Contact Us" not met

So again, does it mean that it is already working since this info is not showing anymore?

I really appreciate all the assistance that you extended.

exzyte

21-06-2018

Thank you very much for the input...

I already adjusted/corrected the condition of the rule and this is now showing on DTM library of the page:

{

name:"MEE Canonical - Contact Us",

trigger:[{

command:"writeHTML",

arguments:[{

html:'

<link rel="canonical" href="https://www.middleeastelectricity.com/en/contact.html" />

}]

}],

scope:{URI:{include:[/\contact/i]}

},

conditions:[function(){

return _satellite.textMatch(_satellite.getVar("Hostname"),/\www.middleeastelectricity.com/i)

}

],

event:"pagetop"

}

^ and before I did this changes, this was showing on the DevTools Console tab:

SATELLITE: Condition function(){return _satellite.textMatch(_satellite.getVar("Hostname"),/https:\/\/www.middleeastelectricity.com\/en\/home.html/i)} for rule "MEE home Canonical Tag" not met.

And now it is gone! So does it mean that it is working fine now? 😃

exzyte

19-06-2018

Hi sir,

I already added canonical tag to this page: Middle East Electricity | Contact  thru DTM

CONDITIONS:

Trigger rule at: Top of Page

Hostname: www.middleeastelectricity.com (regex enabled)

Path (include): /contact (regex enabled)

JAVASCRIPT / THIRD PARTY TAGS:

Sequential HTML: <link rel="canonical" href="https://www.middleeastelectricity.com/en/home.html" />

I have checked "view page source" and also Elements tab on DevTools but it is still not reflecting.

I also posted a question on Adobe Experience Manager Community 😃

jantzen_belliston-Adobe

Community Manager

18-06-2018

I did a bit of searching on the internet to become a little more familiar with the Canonical tag. It looks like it is pretty similar to meta tags. I'm sure there is a way in AEM to add this tag to your site. I'd recommend posting a question in our Adobe Experience Manager​ community where I'm sure an AEM expert can give you some advice.

With that said, I'll still be happy to try and help you deploy this code via DTM. To do so, I'd recommend using a top of page rule with the code placed in the third-party sequential HTML section.

exzyte

17-06-2018

I'm trying to add this thru DTM since there is no way(with our current AEM setup) to add this between head tags on AEM author mode.

By the way, may I know what's remarking beacons? (not familiar with this, sorry)

jantzen_belliston-Adobe

Community Manager

14-06-2018

That is an HTML tag.

With that said, this looks more like a simple link than code used to fire a tracking beacon or other remarking tag. Are you trying to add content to your existing site with DTM rather than use it to fire remarking beacons?

jantzen_belliston-Adobe

Community Manager

12-06-2018

I'm not familiar with Canonical tags, can you share the tag? The tag is likely either HTML or Javascript and we need to place in the correct third-party section.

If you are sure the code is HTML, can you verify if the DTM rule that contains the code is firing? You can use the DTM debugger to turn on debug mode which will show what rules are firing in the console.

exzyte

12-06-2018

Yes, we already have DTM and AEM integration...

Can you please let me know how to add this thru DTM.

I tried adding canonical tags using "sequential html" with "top of page" condition before but it is not showing on "view page source".