Link rewriting for affiliate codes

ساهم ميزة
1

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)
2

أعلم أن هذا من عام 2016، لكنني لم أستطع العثور على إجابة لهذا السؤال وأبحث عن شيء مشابه. هل هناك إضافة تسمح بإعادة كتابة “عامة” لروابط URL تُقدّمها أعضاء المجتمع، أي إضافة علامة تابعة أو تغيير الرابط من رابط قدمه المستخدم إلى رابط تابع؟

3

لا أعرف ذلك، لكنني مهتم بسماع ما إذا كانت هناك تطورات فيما يتعلق بهذا الأمر :slight_smile:

4

يجب أن يكون ذلك ممكنًا في مكون السمة هذه الأيام، اعتمادًا على الشكل المطلوب للروابط.

هل يمكنك نشر مثال على الرابط الأساسي، ومثال على كيف سيبدو كرابط تابع؟

إعجابَين (2)
5

انتهى هذا النقاش قبل الأوان. قد أحتاج إلى إعادة التفكير في تحقيق الربح من مجتمعنا.

في حالتي، سأحتاج إلى إضافة بادئة إلى عنوان URL.

http://merchantxyz.com/....

وتحويله إلى…

https://tracker.adagency123.com/t/t?a=12345678&as=87654321&t=2&tk=1&url=https://merchantxyz.com/...

هناك عدة مواضيع تتناول هذه المسألة، ولكن هل كان هناك بالفعل حل جاهز للإنتاج؟

إعجابَين (2)
6

للأسف، لا أعتقد ذلك. على الأرجح، سيكون هذا مرشحًا ممتازًا لوظيفة Marketplace.

إعجابَين (2)
7

هل من الممكن تنفيذ ذلك كتخصيص للمظهر؟ أنا أنوي تعديل هذا JSFiddle، ولكن ما هو الطريقة الصحيحة لتنفيذه على نسخة Discourse — إذا كان ذلك ممكنًا؟

// قم بتغيير "my-affiliate-id" أدناه إلى معرف الشراكة الفعلي الخاص بك
const aid = 'my-affiliate-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)
8

نعم، هذا ممكن. لنبدأ بشيء بسيط. أولاً، أضف هذا إلى تبويب الرأس (header) لمكون سمة جديد.

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

</script>

ماذا يفعل هذا؟ إنه نوع خاص من وسوم السكربت التي تتم معالجتها بواسطة Discourse. ما هي الفائدة؟ إنه يتيح لك الوصول إلى طرق واجهة برمجة التطبيقات للإضافات.

تريد إضافة كود تابع إلى بعض الروابط. وهذا يعني أنك تريد تعديل محتوى المنشورات. إذا قمت بفحص واجهة برمجة التطبيقات للإضافات، فسترى أن هناك طريقة مخصصة لذلك.

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js#L224-L262

تستخدمها على النحو التالي.

api.decorateCookedElement(
  element => {
    // قم بعملك هنا. 
    // العنصر الممرر هنا هو عقدة HTML للمنشور المطبوخ
  },
  {
    // توضع الخيارات هنا
  }
);

هذا هو الغلاف الذي تحتاج إلى وضع الكود بداخله ليتم تشغيله عند عرض منشور. لذا، دعنا نجرب ذلك.

نأخذ الكود الخاص بك ونضيفه كما هو

api.decorateCookedElement(
  element => {
++  // غيّر "my-affiliate-id" أدناه إلى معرف التابع الفعلي الخاص بك
++  const aid = "my-affiliate-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" أدناه إلى معرف التابع الفعلي الخاص بك
    const aid = "my-affiliate-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;
      }
    });
  },
  {
    // توضع الخيارات هنا
  }
);

هذا يعمل بشكل رائع الآن، لكن لا يزال بإمكاننا تحسينه قليلاً. بما أنك تضيف معرف تابع إلى الروابط فقط، فلا تحتاج إلى تشغيل هذا عندما تكون في محرر الكتابة (composer). هذا هو المكان الذي تكون فيه خيارات الطريقة مفيدة.

إحدى الخيارات التي يمكنك تمريرها للطريقة هي onlyStream

ماذا تفعل؟ إنها تخبر الطريقة أنك تريد فقط أن يتم تشغيل هذا الكود عند عرض المنشور داخل موضوع. دعنا نضيف هذا الخيار.

api.decorateCookedElement(
  element => {
    // غيّر "my-affiliate-id" أدناه إلى معرف التابع الفعلي الخاص بك
    const aid = "my-affiliate-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" أدناه إلى معرف التابع الفعلي الخاص بك
    const aid = "my-affiliate-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 إعجابًا
Ebay EPN: Source map error
Don't decorate cooked items in composer view?
9

واو، ما هذا البرنامج التعليمي الرائع والمفيد!

كانت JSFiddle مجرد مثال وجدته. هذا الشريك المحتمل الجديد لدينا يستخدم بادئة https://، بدلاً من معرف تابع في النهاية. إنهم يستخدمون منصة 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>

الآن، يقوم الكود بإضافة عنوان شبكة الإعلانات أولاً، الذي يتتبع النقرات، ثم يضيف رابط الشريك في النهاية.

3 إعجابات
11

بينما يعمل هذا بفعالية مع الروابط التي يتم إنشاؤها يدويًا، عن طريق ربط كلمة برابط مثل https://website، يبدو أنه لا يلتقط الروابط التي يولدها محلل Discourse تلقائيًا. وبعبارة أخرى:

هذا يعمل: Google
لكن هذا لا يعمل: Google.com

هل يمكن تحسين السكربت لالتقاط الروابط المولدة تلقائيًا أيضًا؟