webエンジニア

【AMP】QUERY_PARAMを使ってdocument内にあるaタグのhref値をurl.parameters次第で動的に生成する方法

【AMP】QUERY_PARAMを使ってdocument内にあるaタグのhref値をurl.param次第で動的に生成する方法

スクリーンショット 2018-06-27 23.27.15

How to dynamically generate the href value of a tag in document using QUERY_PARAM depending on url.param

お疲れ様です。
スイーツはお好きですか?と言われて
スイーツは好きです!甘党です!
と答えたら
かき氷屋さんでした

「かき氷はスイーツか!???」
と思った森田です

今回既存のLPをAMPに移行するお仕事がありまして
その中で
Js-in-AMPの議論はあるものの、
未だ使えない、
パラメータの扱いがあまり調べても出てこなかったのでここに記載します。

こちらは表題のことが実装されているサンプルページです

Please visit the link below.
add url parameters of “data=hogehoge”
push link and then confirm url that state parameters “data=hogehoge”
Also be sure to empty if you do not pass parameters

sample AMPページ

想定は、どこかの広告で叩かれた上記のAMPページ遷移時、
パラメータが付与されていた場合、documentのページ内に設置してあるリンク先(aタグのhref)にそれをつけてます

ドキュメントでいうと
こちらでした
なかなか見当たりませんでした。

確認方法

sample AMPページ

上記のurlでリンクを押すと遷移先のページにはパラメータが引き継がれません。
?data=
となるはずです。(残っているのは気持ち悪いですけど。。これすら取り除く方法を確認中)
次に
上記urlに?data=fb
をつけてリンク先に遷移してください
ulrに?dat=fbが引き継がれていることが確認できます

AMPページに記述したコード

ここに行き着くまでに調べた記事

・サーバサイドでレンダリングする
Springの例(https://arakan-pgm-ai.hatenablog.com/entry/2018/03/13/060000)

・urlパラメータを参照してサーバからクッキーを渡してもらいそこを参照したらいけるかも??(未確認)

・こちらは生成されたAMPページのstateを参照してイベントにより変更するというもの。
ただこのstateの値を遷移時に、動的に生成して欲しいんだよなぁと思い、、
で、windowやdocumentにアクセスできないのでこれは無理っぽかった
https://www.ampproject.org/docs/reference/components/amp-bind#white-listed-functions

・アナリティクスor GTMで計測するように変更
https://ampbyexample.com/components/amp-analytics/

と調べていましたがこのissuesを見つけて一旦やりたかったことは解決しました
https://github.com/ampproject/amphtml/issues/4078

またー

(Visited 1 times, 1 visits today)