Ebay EPN: 소스 맵 오류

개발
1

Ebay 제휴 프로그램은 클라이언트 측에서 링크를 변환하는 스크립트를 제공합니다. 매우 간단한 2줄짜리 코드입니다:

<script>window._epn = {campaign: [XXX_ID_XXX], smartPopover:false};</script>
<script src="https://epnt.ebay.com/static/epn-smart-tools.js"></script>

보안상의 이유로 이 두 줄을 단순히 추가할 수 없다는 것을 인지하고 있습니다. 여기에는 관련 논의가 조금 있습니다: EPN Smart Links

매우 간단한 테마 컴포넌트를 생성하고 코드를 common/head_tag.html 파일에 배치했습니다:

image
image567×183 20.4 KB

ID는 컴포넌트 페이지에서 지정되며 콘솔에는 올바른 ID가 기록됩니다. 그러나 URL이 업데이트되지 않는 것으로 보입니다.

epn-smart-tools.js를 콘텐츠 보안 정책(CSP) 예외로 추가했습니다. 하지만 브라우저 콘솔에서 다음과 같은 경고가 표시됩니다:
image

epn-smart-tools.js에서 참조되는 이 "from-url.js.map"이 문제인 것으로 보입니다. 데스크톱에 간단한 HTML 파일을 작성하여 로컬에서 실행해 보았지만 문제가 없는 것 같습니다. 이는 제 브라우저보다는 Discourse 측의 문제일 가능성이 더 높다는 것을 시사합니다.

이러한 소스 맵(source maps)이 무엇을 하는지, 그리고 Discourse가 그것들과 어떻게 상호작용하는지는 제 지식의 범위를 벗어납니다. 여기에 대한 조언이 있을까요? 제가 놓치고 있는 것이 있을까요?

2

소스 맵은 압축된 자산의 디버깅을 돕는 선택적 파일입니다. 이 자산을 직접 제어할 수 없고, 그 소스에 대한 통제권도 없으므로 이 경고를 무시하면 됩니다.

3

정보 주셔서 감사합니다, @Falco. 생일 축하드립니다.

문제가 제가 <script src="… 라인을 추가한 위치였다는 것을 알아냈습니다.

제 환경에서는 이렇게 작동했습니다:

<script type="text/discourse-plugin" version="0.8">

  console.log(settings.epn_id);
  window._epn = {campaign: settings.epn_id, smartPopover:false};

  var script = document.createElement('script');
  script.src = 'https://epnt.ebay.com/static/epn-smart-tools.js';
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(script);

</script>

다음으로 만난 문제는 동적으로 로드된 요소에는 스크립트가 적용되지 않는다는 것입니다. 예를 들어, 토픽에서 페이지를 새로고침하면 로드된 게시물에는 제휴 링크가 표시되지만, 스크롤하여 더 많은 게시물을 불러올 때 그 게시물에는 표시되지 않습니다.

새로운 요소가 로드될 때마다 스크립트를 실행하는 방법이 있을까요?

4

이상적으로는 새 게시글이 저장될 때 서버 측에서 한 번에 처리하는 것이 좋습니다. Amazon을 위해 정확히 이 기능을 수행하는 플러그인이 있으므로, 이를 eBay에 맞게 수정할 수 있어야 합니다: GitHub - discourse/discourse-affiliate · GitHub

그래도 클라이언트 측에서 처리하기를 원한다면, 다음 유용한 튜토리얼을 참고할 수 있습니다: Link rewriting for affiliate codes - #8 by Johani