I saw this and was thrilled:
Then I installed it, and realized that it still only works for Amazon. Would it be hard to add support for ShareASale? Maybe even a “generic” rewrite where you regex an URL and do a replacement?
2개의 좋아요
이 글은 2016년에 올라온 것이지만 이 질문에 대한 답을 찾지 못해서 비슷한 내용을 찾고 있습니다. 커뮤니티 사용자가 제출한 URL을 ‘일반적으로’ 다시 작성할 수 있는 플러그인이 있나요? 예를 들어, 사용자가 제출한 링크에 제휴 태그를 추가하거나 제휴 링크로 변경하는 것과 같은 기능 말이죠?
제가 아는 한 그런 일은 없었지만, 이 문제에 대한 진행 상황이 있는지 궁금합니다 
요즘에는 링크가 어떤 형태로 보여야 하는지에 따라 테마 컴포넌트에서 이를 구현하는 것이 가능해야 합니다.
기본 링크의 예시와 제휴 링크로 변환된 모습의 예시를 올려 주실 수 있을까요?
2개의 좋아요
이 토론은 너무 일찍 종료되었습니다. 커뮤니티의 수익화 방식을 다시 생각해봐야 할 것 같습니다.
제 경우라면 URL에 접두사를 추가해야 합니다.
http://merchantxyz.com/....
그것을 다음과 같이 변환해야 합니다…
https://tracker.adagency123.com/t/t?a=12345678&as=87654321&t=2&tk=1&url=https://merchantxyz.com/...
이 문제를 다루는 여러 주제가 있지만, 실제로 프로덕션 환경에서 사용할 수 있는 해결책이 있었나요?
2개의 좋아요
아쉽게도 그렇게 생각하지 않습니다. 아마도 이 작업은 Marketplace 직무로 적합할 것 같습니다.
2개의 좋아요
이 기능을 테마 커스터마이징으로 구현할 수 있을까요? 이 JSFiddle을 수정하는 방법을 보고 있는데, Discourse 인스턴스에 이를 올바르게 구현하는 방법은 무엇일까요? (가능하다면)
// 아래 "my-affiliate-id"를 실제 제휴 ID로 변경하세요
const aid = 'my-affiliate-id';
// 링크에 제휴 ID가 이미 없다면 슬래시와 제휴 ID를 추가합니다
const goglinks = document.querySelectorAll('a[href*="gog.com"]');
goglinks.forEach(function(el) {
if(!el.href.includes('pp=')) {
el.href = el.href.replace(/\?.*$/, '') + '?pp=' + aid
}
})
1개의 좋아요
네, 가능합니다. 간단한 것부터 시작해 보겠습니다. 먼저, 새 테마 컴포넌트의 헤더 탭에 아래 코드를 추가하세요.
<script type="text/discourse-plugin" version="0.8.42">
</script>
이것은 무엇을 하는 것일까요? 이는 Discourse가 처리하는 특수한 종류의 스크립트 태그입니다. 그 장점은 무엇일까요? 플러그인 API 메서드에 접근할 수 있게 해 줍니다.
일부 링크에 제휴 코드(affiliate code)를 추가하고 싶다고 하셨죠. 즉, 게시물의 내용을 수정해야 한다는 뜻입니다. 플러그인 API를 확인해 보면 실제로 이를 위한 메서드가 있음을 알 수 있습니다.
아래와 같이 사용합니다.
api.decorateCookedElement(
element => {
// 여기서 작업을 수행합니다.
// 여기 전달되는 element는 렌더링된 게시물의 HTML 노드입니다.
},
{
// 옵션은 여기에 작성합니다
}
);
이것은 게시물이 렌더링될 때 코드가 실행되도록 해야 하는 래퍼입니다. 자, 한번 시도해 보겠습니다.
사용자 코드를 그대로 추가해 보면 다음과 같습니다.
api.decorateCookedElement(
element => {
++ // 아래 "my-affiliate-id"를 실제 제휴 ID로 변경하세요
++ const aid = "my-affiliate-id";
++
++ // 링크에 아직 제휴 ID가 없다면 슬래시와 함께 제휴 ID를 추가합니다
++ const goglinks = document.querySelectorAll('a[href*="gog.com"]');
++ goglinks.forEach(function (el) {
++ if (!el.href.includes("pp=")) {
++ el.href = el.href.replace(/\?.*$/, "") + "?pp=" + aid;
++ }
++ });
},
{
// 옵션은 여기에 작성합니다
}
);
이것이 작동합니까? 네, 작동합니다. 하지만 게시물의 요소가 아닌 document에서 링크를 조회하고 있기 때문에 일부 중복된 작업도 수행하고 있습니다. 그렇다면 이를 어떻게 수정할까요?
메서드에 전달한 element 인수를 기억하십니까? 바로 여기서 그 유용함이 드러납니다.
문서를 조회하는 대신, 대상이 되는 요소를 조회합니다. 따라서 이 부분을 다음과 같이 변경합니다.
const goglinks = document.querySelectorAll('a[href*="gog.com"]');
다음과 같이 변경합니다.
const goglinks = element.querySelectorAll('a[href*="gog.com"]');
그리고 최종적으로 다음과 같은 코드가 됩니다.
api.decorateCookedElement(
element => {
// 아래 "my-affiliate-id"를 실제 제휴 ID로 변경하세요
const aid = "my-affiliate-id";
// 링크에 아직 제휴 ID가 없다면 슬래시와 함께 제휴 ID를 추가합니다
-- const goglinks = document.querySelectorAll('a[href*="gog.com"]');
++ const goglinks = element.querySelectorAll('a[href*="gog.com"]');
goglinks.forEach(function (el) {
if (!el.href.includes("pp=")) {
el.href = el.href.replace(/\?.*$/, "") + "?pp=" + aid;
}
});
},
{
// 옵션은 여기에 작성합니다
}
);
이제 잘 작동합니다. 하지만 여전히 조금 더 개선할 수 있습니다. 링크에만 제휴 ID를 추가하는 것이므로, 컴포저(composer)에서 작업할 때 이 코드가 실행되도록 할 필요는 없습니다. 바로 여기서 메서드 옵션이 유용합니다.
메서드에 전달할 수 있는 옵션 중 하나는 onlyStream입니다.
이것은 무엇을 하는 것일까요? 이 코드가 주제(topic) 내에서 게시물이 렌더링될 때만 실행되도록 메서드에 지시합니다. 해당 옵션을 추가해 보겠습니다.
api.decorateCookedElement(
element => {
// 아래 "my-affiliate-id"를 실제 제휴 ID로 변경하세요
const aid = "my-affiliate-id";
// 링크에 아직 제휴 ID가 없다면 슬래시와 함께 제휴 ID를 추가합니다
const goglinks = element.querySelectorAll('a[href*="gog.com"]');
goglinks.forEach(function (el) {
if (!el.href.includes("pp=")) {
el.href = el.href.replace(/\?.*$/, "") + "?pp=" + aid;
}
});
},
{
++ onlyStream: true
}
);
자, 이제 해야 할 일은 이 코드를 앞서 이야기했던 특수 스크립트 태그 안에 넣는 것뿐입니다.
<script type="text/discourse-plugin" version="0.8.42">
api.decorateCookedElement(
element => {
// 아래 "my-affiliate-id"를 실제 제휴 ID로 변경하세요
const aid = "my-affiliate-id";
// 링크에 아직 제휴 ID가 없다면 슬래시와 함께 제휴 ID를 추가합니다
const goglinks = element.querySelectorAll('a[href*="gog.com"]');
goglinks.forEach(function (el) {
if (!el.href.includes("pp=")) {
el.href = el.href.replace(/\?.*$/, "") + "?pp=" + aid;
}
});
},
{
onlyStream: true
}
);
</script>
그 다음, 이 코드를 컴포넌트의 헤더 탭에 추가하면 준비 완료입니다. 이 예제에서는 GOG를 사용했지만, 이는 질문하신 내용 때문이며, URL 구조만 알면 어떤 제휴 프로그램에도 이 패턴을 사용할 수 있습니다.
11개의 좋아요
와, 정말 훌륭하고 교육적인 튜토리얼이네요!
JSFiddle은 제가 찾은 예시일 뿐입니다. 저희의 새로운 잠재적 파트너는 https:// 접두사를 사용하고, 끝에 제휴 ID를 붙이는 방식이 아닙니다. 그들은 adtraction.com 플랫폼을 사용합니다.
다른 분들이 활용할 수 있도록 제가 수정한 버전을 여기에 올립니다.
<script type="text/discourse-plugin" version="0.8.42">
api.decorateCookedElement(
element => {
const affiliate = 'https://their-ad-network.com/...';
const affiliate_links = element.querySelectorAll('a[href*="potentialparterwebsite.com"]');
affiliate_links.forEach(function(el) {
if (!el.href.startsWith(affiliate)) {
el.href = affiliate + encodeURIComponent(el.href);
}
});
},
{
onlyStream: true
}
);
</script>
이제 코드가 클릭을 추적하는 광고 네트워크 URL을 먼저 추가하고, 그 뒤에 파트너 링크를 붙입니다.
3개의 좋아요
수동으로 링크를 만든 경우, 예를 들어 특정 단어를 https://website에 연결하는 경우처럼 이 방법은 우아하게 작동합니다. 하지만 Discourse의 파서가 자동으로 생성한 링크는 감지하지 못하는 것 같습니다. 다시 말해:
이것은 작동합니다: Google
하지만 이것은 작동하지 않습니다: Google.com
스크립트를 개선하여 자동으로 생성된 링크도 감지할 수 있도록 할 수 있을까요?